/* Yardage tools kit — directory widgets (course search, state map, state directory, stats, badges, QR).
   Consumes the theme's --yd-* tokens with fallbacks. Mobile-first. */

.yd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tables used by the kit */
.yd-table { width: 100%; border-collapse: collapse; font-size: var(--yd-text-sm, .875rem); font-variant-numeric: tabular-nums; }
.yd-table caption { text-align: left; font-weight: 600; padding: 0 0 var(--yd-s-2, 8px); color: var(--yd-ink, #141a16); }
.yd-table th, .yd-table td { padding: var(--yd-s-2, 8px) var(--yd-s-3, 12px); border-bottom: 1px solid var(--yd-rule, #dfded6); text-align: left; vertical-align: top; }
.yd-table thead th { font-size: var(--yd-text-xs, .75rem); letter-spacing: .04em; text-transform: uppercase; color: var(--yd-ink-3, #5f6862); border-bottom: 1px solid var(--yd-rule-strong, #b9b8ae); }
.yd-table tbody th { font-weight: 600; }
.yd-table .yd-num { text-align: right; }
.yd-table--compact th, .yd-table--compact td { padding: 6px 10px; }
.yd-table a { color: var(--yd-green-text, #23703f); }

/* ---------- Course search (combobox) ---------- */
.yd-course-search { position: relative; margin: var(--yd-s-5, 24px) 0; }
.yd-course-search__label { display: block; font-family: var(--yd-font-display, inherit); font-weight: 700; font-size: var(--yd-text-lg, 1.2rem); color: var(--yd-ink, #141a16); margin-bottom: var(--yd-s-1, 4px); }
.yd-course-search__hint { margin: 0 0 var(--yd-s-3, 12px); color: var(--yd-ink-2, #4b534d); font-size: var(--yd-text-sm, .875rem); }
.yd-combobox { display: flex; gap: var(--yd-s-2, 8px); }
.yd-combobox__input { flex: 1 1 auto; width: 100%; min-width: 0; font: inherit; font-size: 1.0625rem; padding: 12px 14px; border: 1px solid var(--yd-rule-strong, #b9b8ae); border-radius: var(--yd-radius, 12px); background: var(--yd-surface, #fff); color: var(--yd-ink, #141a16); -webkit-appearance: none; appearance: none; }
.yd-combobox__input:focus { outline: 2px solid var(--yd-focus, #267946); outline-offset: 2px; border-color: var(--yd-green, #267946); }
.yd-combobox__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.yd-combobox__btn { flex: 0 0 auto; }
.yd-course-search__results { list-style: none; margin: var(--yd-s-2, 8px) 0 0; padding: var(--yd-s-1, 4px); background: var(--yd-surface, #fff); border: 1px solid var(--yd-rule, #dfded6); border-radius: var(--yd-radius, 12px); box-shadow: var(--yd-shadow-2, 0 24px 48px -24px rgba(20,26,22,.35)); max-height: 22rem; overflow: auto; position: absolute; left: 0; right: 0; z-index: 20; }
.yd-course-search__results[hidden] { display: none; }
.yd-option { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--yd-radius-sm, 8px); cursor: pointer; }
.yd-option[aria-selected="true"], .yd-option:hover { background: var(--yd-green-soft, #e3efe6); }
.yd-option__name { font-weight: 600; color: var(--yd-ink, #141a16); }
.yd-option__meta { font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d); }
.yd-course-search__status { min-height: 1.4em; margin: var(--yd-s-2, 8px) 0 0; font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d); }
.yd-course-search__empty { margin-top: var(--yd-s-4, 16px); padding: var(--yd-s-4, 16px); border: 1px solid var(--yd-rule, #dfded6); border-radius: var(--yd-radius, 12px); background: var(--yd-surface-2, #f1f0e9); color: var(--yd-ink, #141a16); }
.yd-course-search__empty[hidden], .yd-course-search__server[hidden] { display: none; }
.yd-course-search__noscript { color: var(--yd-ink-2, #4b534d); font-size: var(--yd-text-sm, .875rem); }
/* No-JS / SearchAction results (/golf-courses/?q=…) */
.yd-course-search__server { margin-top: var(--yd-s-3, 12px); padding: var(--yd-s-2, 8px) var(--yd-s-4, 16px); border: 1px solid var(--yd-rule, #dfded6); border-radius: var(--yd-radius, 12px); background: var(--yd-surface, #fff); color: var(--yd-ink, #141a16); }
.yd-course-search__server-status { margin: var(--yd-s-2, 8px) 0; font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d) !important; }
.yd-course-search__list { list-style: none; margin: 0; padding: 0; }
.yd-course-search__list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--yd-s-3, 12px); padding: 8px 0; border-top: 1px solid var(--yd-rule, #dfded6); color: var(--yd-ink, #141a16) !important; }
.yd-course-search__list a { font-weight: 600; color: var(--yd-green-text, #23703f) !important; }
.yd-course-search__list span { font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d); }
/* On green / dark bands: label and hint go light, the button becomes the paper button (theme rule),
   and the white panels (results, no-match) keep paper-coloured text. */
.yd-band--green .yd-course-search__label, .yd-band--dark .yd-course-search__label { color: #fff; }
.yd-band--green .yd-course-search__hint, .yd-band--dark .yd-course-search__hint, .yd-band--green .yd-course-search__status, .yd-band--dark .yd-course-search__status, .yd-band--green .yd-course-search__noscript, .yd-band--dark .yd-course-search__noscript { color: #fff; }
.yd-band--green .yd-combobox__input, .yd-band--dark .yd-combobox__input { border-color: transparent; }
.yd-band--green .yd-combobox__input:focus, .yd-band--dark .yd-combobox__input:focus { outline-color: #fff; }
.yd-band--green .yd-course-search__empty :is(p, h3, li, label, .yd-lead-form__title), .yd-band--dark .yd-course-search__empty :is(p, h3, li, label, .yd-lead-form__title) { color: var(--yd-ink, #141a16); }
.yd-band--green .yd-course-search__empty :is(.yd-fineprint, .yd-form__note), .yd-band--dark .yd-course-search__empty :is(.yd-fineprint, .yd-form__note) { color: var(--yd-ink-3, #5f6862); }
.yd-band--green .yd-course-search__empty a:not(.yd-btn), .yd-band--dark .yd-course-search__empty a:not(.yd-btn) { color: var(--yd-green-text, #23703f); }
.yd-band--green .yd-course-search__empty .yd-btn--primary, .yd-band--dark .yd-course-search__empty .yd-btn--primary { background: var(--yd-green, #267946); color: var(--yd-on-green, #fff); }
.yd-band--green .yd-course-search__empty :focus-visible, .yd-band--dark .yd-course-search__empty :focus-visible { outline-color: var(--yd-focus, #267946); }
@media (min-width: 640px) {
  .yd-option { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--yd-s-3, 12px); }
}

/* ---------- State tile map ---------- */
.yd-state-map { margin: var(--yd-s-5, 24px) 0; }
.yd-map { display: block; width: 100%; height: auto; max-width: 44rem; }
.yd-tile { cursor: default; }
a.yd-tile { cursor: pointer; text-decoration: none; }
a.yd-tile text { text-decoration: none; }
.yd-tile__bg { fill: var(--yd-green, #267946); stroke: var(--yd-bg, #fbfaf6); stroke-width: 1; transition: fill-opacity .15s; }
.yd-tile--l1 .yd-tile__bg { fill-opacity: .16; }
.yd-tile--l2 .yd-tile__bg { fill-opacity: .34; }
.yd-tile--l3 .yd-tile__bg { fill-opacity: .55; }
.yd-tile--l4 .yd-tile__bg { fill-opacity: .78; }
.yd-tile--l5 .yd-tile__bg { fill-opacity: 1; }
.yd-tile text { fill: var(--yd-ink, #141a16); pointer-events: none; }
/* Tile text ≥ 4.5:1 on every shade: ink on the lighter four, white on the full green. */
.yd-tile--l5 text { fill: var(--yd-on-green, #fff); }
.yd-tile--static .yd-tile__bg { opacity: .9; }
@media (max-width: 479px) {
  .yd-tile__val { display: none; }
  .yd-tile__abbr { transform: translateY(6px); }
}
a.yd-tile:hover .yd-tile__bg { stroke: var(--yd-ink, #141a16); stroke-width: 2; }
a.yd-tile:focus { outline: none; }
/* Focus: a 4px ink ring (2px on the tile, 2px in the gutter) — ≥ 3:1 against every tile shade and the page, both schemes. */
a.yd-tile:focus-visible .yd-tile__bg { stroke: var(--yd-ink, #141a16); stroke-width: 4; }
/* /golf-courses/#state-{slug}: the target tile is outlined and lands below the sticky header. */
.yd-tile[id]:target { scroll-margin-top: calc(var(--yd-header-h, 60px) + 3rem); } /* anchor landing only; keyboard focus keeps the default so the consent bar's scroll padding wins (QA-83) */
.yd-tile:target .yd-tile__bg { stroke: var(--yd-ink, #141a16); stroke-width: 4; }
.yd-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--yd-s-3, 12px); font-size: var(--yd-text-xs, .75rem); color: var(--yd-ink-2, #4b534d); }
.yd-map__swatch { display: inline-block; width: 22px; height: 12px; border-radius: 3px; background: var(--yd-green, #267946); }
.yd-map__swatch.yd-tile--l1 { opacity: .16; } .yd-map__swatch.yd-tile--l2 { opacity: .34; } .yd-map__swatch.yd-tile--l3 { opacity: .55; } .yd-map__swatch.yd-tile--l4 { opacity: .78; }
.yd-map__legend-note { flex-basis: 100%; }
.yd-map__list { margin-top: var(--yd-s-4, 16px); }
.yd-map__list summary { cursor: pointer; color: var(--yd-green-text, #23703f); font-weight: 600; }
.yd-map__list table { margin-top: var(--yd-s-3, 12px); }
@media (prefers-color-scheme: dark) {
  .yd-tile text { fill: var(--yd-ink, #f1f0e8); }
  .yd-tile--l5 text { fill: var(--yd-on-green, #fff); }
}

/* ---------- State directory ---------- */
.yd-dir { margin: var(--yd-s-5, 24px) 0; }
.yd-dir__filter label { display: block; font-weight: 600; margin-bottom: var(--yd-s-1, 4px); }
.yd-dir__input { width: 100%; font: inherit; font-size: 1.0625rem; padding: 12px 14px; border: 1px solid var(--yd-rule-strong, #b9b8ae); border-radius: var(--yd-radius, 12px); background: var(--yd-surface, #fff); color: var(--yd-ink, #141a16); -webkit-appearance: none; appearance: none; }
.yd-dir__input:focus { outline: 2px solid var(--yd-focus, #267946); outline-offset: 2px; }
.yd-dir__input[hidden] { display: none; }
.yd-dir__status { margin: var(--yd-s-2, 8px) 0 0; font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d); }
.yd-dir__index { position: sticky; top: var(--yd-header-h, 60px); z-index: 5; background: var(--yd-bg, #fbfaf6); padding: var(--yd-s-2, 8px) 0; margin: var(--yd-s-4, 16px) 0; border-bottom: 1px solid var(--yd-rule, #dfded6); }
.yd-dir__index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.yd-dir__index a { display: inline-block; min-width: 2rem; padding: 4px 6px; text-align: center; border-radius: var(--yd-radius-sm, 8px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--yd-green-text, #23703f); text-decoration: none; }
.yd-dir__index a:hover, .yd-dir__index a:focus-visible { background: var(--yd-green-soft, #e3efe6); }
.yd-dir__index li[hidden] { display: none; }
.yd-dir__note { margin: 0 0 var(--yd-s-2, 8px); font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d); }
.yd-dir__letter h3 { font-family: var(--yd-font-display, inherit); font-size: var(--yd-text-xl, 1.5rem); margin: var(--yd-s-6, 32px) 0 var(--yd-s-2, 8px); padding-bottom: var(--yd-s-1, 4px); border-bottom: 1px solid var(--yd-rule-strong, #b9b8ae); scroll-margin-top: calc(var(--yd-header-h, 60px) + 4rem); }
/* Cities: <details> (open on small states, collapsed on big ones), rows kept lean for page weight. */
.yd-dir details { border-bottom: 1px solid var(--yd-rule, #dfded6); scroll-margin-top: calc(var(--yd-header-h, 60px) + 4rem); }
.yd-dir summary { display: flex; align-items: baseline; gap: var(--yd-s-2, 8px); min-height: 44px; padding: 10px 28px 10px 0; position: relative; cursor: pointer; list-style: none; font-weight: 600; color: var(--yd-ink, #141a16); }
.yd-dir summary::-webkit-details-marker { display: none; }
.yd-dir summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--yd-ink-3, #5f6862); border-bottom: 2px solid var(--yd-ink-3, #5f6862); transform: rotate(45deg); }
.yd-dir details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.yd-dir summary:hover { color: var(--yd-green-text, #23703f); }
.yd-dir summary span { font-weight: 400; color: var(--yd-ink-3, #5f6862); font-variant-numeric: tabular-nums; }
.yd-dir summary i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the ", " read before the count */
.yd-dir details ul { list-style: none; margin: 0 0 var(--yd-s-3, 12px); padding: 0; }
.yd-dir details li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0 7px var(--yd-s-4, 16px); border-top: 1px solid var(--yd-rule, #dfded6); }
.yd-dir details li a { font-weight: 600; text-decoration: none; color: var(--yd-green-text, #23703f); }
.yd-dir details li a:hover { text-decoration: underline; }
.yd-dir details li small { font-size: var(--yd-text-sm, .875rem); color: var(--yd-ink-2, #4b534d); }
@media (min-width: 720px) {
  .yd-dir details li { flex-direction: row; align-items: baseline; gap: var(--yd-s-3, 12px); }
}

/* ---------- State stats (extends the theme's .yd-facts) ---------- */
.yd-state-stats__cities { margin-top: var(--yd-s-3, 12px); }
.yd-state-stats__source { color: var(--yd-ink-3, #5f6862); }

/* ---------- Badge generator ---------- */
.yd-badge-gen { margin: var(--yd-s-5, 24px) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yd-s-5, 24px); }
.yd-badge-gen__h { font-size: var(--yd-text-md, 1.0625rem); font-weight: 700; margin: 0 0 var(--yd-s-2, 8px); color: var(--yd-ink, #141a16); }
.yd-badge-gen__styles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--yd-s-3, 12px); }
.yd-badge-gen__styles legend { padding: 0; margin-bottom: var(--yd-s-2, 8px); }
.yd-badge-gen__style { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--yd-rule-strong, #b9b8ae); border-radius: var(--yd-radius-pill, 999px); cursor: pointer; }
.yd-badge-gen__style:has(input:checked) { border-color: var(--yd-green, #267946); background: var(--yd-green-soft, #e3efe6); }
.yd-badge-gen__preview { padding: var(--yd-s-5, 24px); border: 1px dashed var(--yd-rule-strong, #b9b8ae); border-radius: var(--yd-radius, 12px); display: flex; justify-content: center; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(20,26,22,.03) 10px 20px); }
.yd-badge-gen__img { max-width: 100%; height: auto; }
.yd-badge-gen__code { width: 100%; font-family: var(--yd-font-mono, monospace); font-size: .8125rem; padding: 12px; border: 1px solid var(--yd-rule-strong, #b9b8ae); border-radius: var(--yd-radius, 12px); background: var(--yd-surface, #fff); color: var(--yd-ink, #141a16); resize: vertical; }
.yd-badge-gen__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yd-s-3, 12px); margin: var(--yd-s-3, 12px) 0 0; }
.yd-badge-gen__status, .yd-badge-gen__picked { min-height: 1.4em; margin: var(--yd-s-2, 8px) 0 0; font-size: var(--yd-text-sm, .875rem); color: var(--yd-green-text, #23703f); }
.yd-badge-gen .yd-course-search { margin: 0; }

/* ---------- QR ---------- */
.yd-qr { margin: var(--yd-s-5, 24px) 0; display: inline-flex; flex-direction: column; align-items: center; gap: var(--yd-s-2, 8px); padding: var(--yd-s-4, 16px); background: #fff; border: 1px solid var(--yd-rule, #dfded6); border-radius: var(--yd-radius, 12px); }
.yd-qr__svg { display: block; width: 176px; height: 176px; }
.yd-qr__caption { font-size: var(--yd-text-sm, .875rem); color: #4b534d; text-align: center; max-width: 16rem; }
.yd-qr__url { display: block; font-family: var(--yd-font-mono, monospace); font-size: var(--yd-text-xs, .75rem); color: #5f6862; word-break: break-all; }

/* Kit CTA fallback (only used when the plugin's CTA shortcode is absent) */
.yd-tk-cta { margin: var(--yd-s-4, 16px) 0; }

@media print {
  .yd-course-search, .yd-dir__filter, .yd-dir__index, .yd-badge-gen__actions { display: none !important; }
  .yd-dir details > ul { display: block !important; }
}