/* vendor-directory.css */
.nsfvd {
  --nsf-navy: #002b5c;
  --nsf-blue: #0066a6;
  --nsf-gold: #ffd400;
  --nsf-red: #c8102e;
  --nsf-border: #d7dce1;
  --nsf-muted: #5c6670;
  color: #172b3a;
  font-family: "Roboto Condensed", Arial, sans-serif;
  margin-inline: auto;
  max-width: 1440px;
  min-height: 100vh;
  padding: 1rem;
}

.nsfvd *, .nsfvd *::before, .nsfvd *::after { box-sizing: border-box; }
.nsfvd__loading, .nsfvd__error, .nsfvd__empty { padding: 2rem; text-align: center; }
.nsfvd__loading { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 2rem); }
.nsfvd__loading-spinner { animation: nsfvd-loading-spin .8s linear infinite; border: 3px solid #d9e0eb; border-radius: 50%; border-top-color: var(--nsf-navy); height: 2.25rem; margin-bottom: .85rem; width: 2.25rem; }
.nsfvd__loading-message { font-size: 1.125rem; }
@keyframes nsfvd-loading-spin { to { transform: rotate(360deg); } }
.nsfvd__error { color: #8b0000; }
.nsfvd__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.nsfvd__header-main { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; min-width: 0; }
.nsfvd__header-actions { display: inline-flex; align-items: center; gap: .5rem; }
.nsfvd__header-action { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.25rem; padding: .35rem .75rem; border: 1px solid #aab3bc; border-radius: 999px; background: #fff; color: var(--nsf-navy); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
.nsfvd__header-action:hover { border-color: var(--nsf-navy); background: #f1f4f6; color: var(--nsf-navy); }
.nsfvd__header-action:focus-visible { outline: 3px solid rgba(0,102,166,.3); outline-offset: 2px; }
.nsfvd__heading { color: var(--nsf-navy); font-family: "Roboto Condensed", Arial, sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; line-height: .95; margin: 0; text-transform: uppercase; }
.nsfvd__summary { color: #334155; font-size: 1rem; font-weight: 700; margin: 0; }
.nsfvd__controls { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 1.6fr) minmax(12rem, 1fr) auto auto; gap: .75rem; margin: 1.25rem 0; }
.nsfvd__control, .nsfvd__clear { min-height: 3rem; border: 1px solid #aab3bc; border-radius: .5rem; background: #fff; color: #172b3a; font: inherit; padding: .65rem .8rem; }
.nsfvd__control:focus, .nsfvd__clear:focus-visible, .nsfvd__more:focus-visible, .nsfvd__save:focus-within { outline: 3px solid rgba(0,102,166,.3); outline-offset: 2px; }
.nsfvd__saved-only { align-items: center; border: 1px solid #aab3bc; border-radius: 999px; cursor: pointer; display: inline-flex; font-weight: 700; gap: .45rem; justify-content: center; min-height: 3rem; padding: .65rem .8rem; white-space: nowrap; }
.nsfvd__saved-only--checked { background: var(--nsf-navy); border-color: var(--nsf-navy); color: #fff; }
.nsfvd__saved-only--disabled { color: #7b8490; }
.nsfvd__clear { cursor: pointer; font-weight: 700; }
.nsfvd__clear:hover { border-color: var(--nsf-navy); color: var(--nsf-navy); }
.nsfvd__status { min-height: 1.5rem; }
.nsfvd__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: .75rem; }
.nsfvd__card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--nsf-border); border-radius: 1rem; background: #fff; break-inside: avoid; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.nsfvd__card:hover { border-color: #98a4af; box-shadow: 0 7px 20px rgba(14,30,45,.13); transform: translateY(-2px); }
.nsfvd__card--spotlight { border: 4px solid var(--nsf-gold); }
.nsfvd__card--spotlight:hover { border-color: #e1b800; box-shadow: 0 7px 20px rgba(104,78,0,.2); }
.nsfvd__spotlight-label { background: var(--nsf-gold); color: #000; font-size: .75rem; font-weight: 900; letter-spacing: .06em; padding: .25rem .65rem; }
.nsfvd__image-link { display: block; position: relative; background: #e9edf0; overflow: hidden; }
.nsfvd__lightbox-link { position: relative; }
.nsfvd__lightbox-link:focus-visible { outline: 3px solid var(--nsf-blue); outline-offset: 2px; }
.nsfvd__expand-icon { position: absolute; right: .45rem; bottom: .45rem; display: none; width: 1.75rem; height: 1.75rem; padding: .3rem; border-radius: .35rem; background: rgb(255 255 255 / .9); color: var(--nsf-navy); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.nsfvd__lightbox-link:hover .nsfvd__expand-icon { color: var(--nsf-blue); }
.nsfvd__image { aspect-ratio: 4 / 3; display: block; height: auto; object-fit: cover; width: 100%; }
.nsfvd__new-corner { position: absolute; right: -.2rem; top: -.2rem; width: 5rem; z-index: 2; pointer-events: none; }
.nsfvd__card--spotlight .nsfvd__new-corner { right: -.25rem; top: -.25rem; }
.nsfvd__card-content { display: flex; flex: 1; flex-direction: column; padding: .85rem; }
.nsfvd__title { color: var(--nsf-navy); font-size: 1.35rem; line-height: 1.08; margin: 0 0 .45rem; }
.nsfvd__title-badge { display: inline-block; width: auto; height: 1.35em; margin-left: .35rem; vertical-align: -.25em; }
.nsfvd__categories { color: var(--nsf-muted); font-size: .9rem; font-weight: 400; line-height: 1.2; margin: 0 0 .45rem; }
.nsfvd__location { font-size: .96rem; font-weight: 700; line-height: 1.2; margin: 0 0 .55rem; }
.nsfvd__location-link, .nsfvd__title a { color: var(--nsf-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.nsfvd__location-link:hover, .nsfvd__title a:hover { color: var(--nsf-blue); }
.nsfvd__location-link { align-items: flex-start; display: inline-flex; gap: .3rem; }
.nsfvd__location-link > .nsfvd__inline-icon { margin-top: .08em; }
.nsfvd__location-details { min-width: 0; }
.nsfvd__inline-icon { display: inline-block; flex: 0 0 auto; height: 1rem; width: 1rem; }
.nsfvd__description { font-size: .95rem; line-height: 1.28; }
.nsfvd__description-text { margin: 0; }
.nsfvd__description--collapsed .nsfvd__description-text, .nsfvd__special-text--collapsed { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.nsfvd__more { align-items: center; display: inline-flex; gap: .15rem; border: 0; background: transparent; color: var(--nsf-blue); cursor: pointer; font: inherit; font-weight: 700; padding: .2rem 0; }
.nsfvd__more-icon { width: .85rem; height: .85rem; }
.nsfvd__highlight { background: yellow; border: 1px dotted currentColor; border-radius: 0; color: inherit; padding: 0; }
.nsfvd__special { border-left: 4px solid var(--nsf-blue); margin-top: .75rem; padding: .55rem .65rem; }
.nsfvd__special--new-food { background: #eef8e9; border-color: #4e8f34; }
.nsfvd__special--gluten-free { background: #fff5e3; border-color: #f28c00; }
.nsfvd__special--bargain { background: #eaf2ff; border-color: #264fa3; }
.nsfvd__special-heading { font-size: .95rem; margin: 0 0 .2rem; }
.nsfvd__special-text { font-size: .9rem; line-height: 1.2; margin: 0; }
.nsfvd__special-image, .nsfvd__winner-badge { display: block; height: auto; margin-top: .4rem; max-height: 5rem; max-width: 100%; width: auto; }
.nsfvd__special-image-link { display: inline-block; max-width: 100%; }
.nsfvd__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: auto; padding-top: .75rem; }
.nsfvd__actions--single { grid-template-columns: 1fr; }
.nsfvd__save, .nsfvd__navigate { align-items: center; border: 1px solid #aab3bc; border-radius: 999px; display: inline-flex; font-weight: 700; gap: .35rem; justify-content: center; min-width: 0; min-height: 2rem; padding: .4rem .65rem; white-space: nowrap; }
.nsfvd__save { cursor: pointer; background: #fff; }
.nsfvd__save-checkbox, .nsfvd__saved-only input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nsfvd__save--checked { background: var(--nsf-navy); border-color: var(--nsf-navy); color: #fff; }
.nsfvd__save:hover { border-color: var(--nsf-navy); }
.nsfvd__navigate { color: var(--nsf-navy); text-decoration: none; }
.nsfvd__navigate:hover { background: #f1f4f6; border-color: var(--nsf-navy); color: var(--nsf-navy); }
.nsfvd__lightbox { z-index: 2147483647; max-width: min(96vw, 90rem); max-height: 96vh; margin: auto; padding: 2.75rem 1rem 1rem; border: 0; border-radius: .75rem; background: #111; color: #fff; box-shadow: 0 20px 70px rgb(0 0 0 / .6); }
.nsfvd__lightbox::backdrop { background: rgb(0 0 0 / .82); }
.nsfvd__lightbox-image { display: block; max-width: calc(96vw - 2rem); max-height: calc(90vh - 4rem); width: auto; height: auto; margin: auto; object-fit: contain; }
.nsfvd__lightbox-close { position: absolute; top: .35rem; right: .5rem; min-width: 2.5rem; min-height: 2.5rem; border: 1px solid #fff; border-radius: 999px; background: transparent; color: #fff; font: 700 1.75rem/1 sans-serif; cursor: pointer; }
.nsfvd__lightbox-close:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.nsfvd__lightbox-caption { margin: .55rem 0 0; text-align: center; }

/* Base44-style customizable selects. Browsers without base-select support keep
   a readable native select with the same label and count text. */
@supports (appearance: base-select) {
  .nsfvd__select,
  .nsfvd__select::picker(select) {
    appearance: base-select;
  }

  .nsfvd__select { cursor: pointer; }
  .nsfvd__select::picker(select) {
    width: anchor-size(width);
    max-height: min(70dvh, 32rem, calc(100dvh - 1rem));
    max-block-size: min(70dvh, 32rem, calc(100dvh - 1rem));
    margin: .3rem 0;
    padding: .35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid #d7dce1;
    border-radius: .75rem;
    background: #fff;
    color: #172b3a;
    box-shadow: 0 12px 30px rgb(0 0 0 / .16);
  }

  .nsfvd__location-select::picker(select) {
    inset: auto;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block;
    width: min(20rem, calc(100vw - 1rem));
    min-width: anchor-size(width);
    max-width: calc(100vw - 1rem);
    overflow-x: hidden;
  }

  .nsfvd__select > .nsfvd__select-button,
  .nsfvd__select selectedcontent {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: .75rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }

  .nsfvd__select option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .75rem;
    padding: .55rem .65rem;
    border-radius: .5rem;
    cursor: pointer;
  }

  .nsfvd__select option:hover,
  .nsfvd__select option:focus,
  .nsfvd__select option:checked { background: rgb(0 43 92 / .1); }
  .nsfvd__select option:disabled { cursor: not-allowed; color: #66717d; opacity: .55; }
  .nsfvd__select option:disabled .nsfvd__option-count { background: #e9edf0; color: #66717d; font-weight: 400; }
  .nsfvd__select option::checkmark { display: none; }
  .nsfvd__option-label { min-width: 0; flex: 1; }
  .nsfvd__option-count {
    flex: none;
    margin-left: auto;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgb(0 43 92 / .1);
    color: var(--nsf-navy);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25rem;
  }
  .nsfvd__location-select option { white-space: normal; }
  .nsfvd__location-select option .nsfvd__option-label { overflow-wrap: anywhere; }
  .nsfvd__location-select selectedcontent .nsfvd__option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 1050px) {
  .nsfvd__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nsfvd__search { grid-column: 1 / -1; grid-row: 1; }
  .nsfvd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .nsfvd { padding: .75rem; }
  .nsfvd__controls { grid-template-columns: 1fr; }
  .nsfvd__search { grid-column: auto; grid-row: auto; }
  .nsfvd__saved-only, .nsfvd__clear { justify-content: center; }
  .nsfvd__grid { grid-template-columns: 1fr; }
  .nsfvd__title-link, .nsfvd__location-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .nsfvd__expand-icon { display: block; }
}

@media (max-width: 620px) {
  @supports (appearance: base-select) {
    .nsfvd__select::picker(select) {
      inset: auto;
      max-height: min(58dvh, 26rem, calc(100dvh - 1rem));
      max-block-size: min(58dvh, 26rem, calc(100dvh - 1rem));
      position-area: block-end span-inline-start;
      position-try-fallbacks: flip-block;
    }

    .nsfvd__location-select::picker(select) {
      position-area: block-end span-inline-end;
    }
  }
}

@media print {
  body { font-weight: 400 !important; }
  .nsfvd { max-width: none; min-height: 0; padding: 0; }
  .nsfvd__controls, .nsfvd__loading, .nsfvd__image-link, .nsfvd__new-corner, .nsfvd__actions, .nsfvd__header-actions, .nsfvd__more, .nsfvd__status, .nsfvd__lightbox { display: none !important; }
  .nsfvd__heading { font-size: 22pt; margin-bottom: 8pt; }
  .nsfvd__summary { font-size: 11pt; }
  .nsfvd__grid { display: block; margin: 0; }
  .nsfvd__card { break-inside: avoid; box-shadow: none !important; margin: 0 0 7pt; overflow: visible; transform: none !important; }
  .nsfvd__card:not(.nsfvd__card--spotlight) { border-color: transparent; }
  .nsfvd__card--spotlight { border-width: 1px; }
  .nsfvd__spotlight-label { border-bottom: 1px solid #777; font-size: 9pt; padding: 2pt 5pt; }
  .nsfvd__card-content { padding: 5pt; }
  .nsfvd__title { border-bottom: 1px solid #999; font-size: 13pt; margin: 0 0 3pt; padding-bottom: 3pt; }
  .nsfvd__categories, .nsfvd__location, .nsfvd__description, .nsfvd__special-heading, .nsfvd__special-text { font-size: 11pt; line-height: 1.05; }
  .nsfvd__categories, .nsfvd__location { margin-bottom: 2pt; }
  .nsfvd__description--collapsed .nsfvd__description-text, .nsfvd__special-text--collapsed { display: block; overflow: visible; }
  .nsfvd__special { margin-top: 3pt; padding: 2pt 4pt; }
  .nsfvd__special-image, .nsfvd__winner-badge { display: none !important; }
  .nsfvd__highlight { background: transparent; border: 0; }
}
/* vendor-directory.css */