/* ======================================================= lc-golf-finder.css ==
   The Tee Time Finder — /golf/tee-times/, plus the /golf/ front.

   What this replaces: the control layer shipped unstyled. Every field reported
   `appearance: auto`, so the selects rendered in Arial and the date field in
   the UA's monospace, on a page whose own type is Playfair Display and PT
   Serif. Five pills of five different widths (143 / 125 / 118 / 142 / 91px)
   sat in a row with no shared measure, the query box floated 8px clear of its
   own button, and everything carried a 6–8px radius the rest of the site uses
   nowhere. It read as a form pasted onto a designed page, because it was one.

   Two things had to be true of the replacement.

   1. It is a TOOL, not a band of marketing. Dense, quiet, legible: the
      photography below carries the page, and the controls should recede into
      the task the moment they have been set.
   2. It has to be the same object as the rest of the golf pages. Those are
      set by lc-guide.css: hairline department rules with an accent tick,
      square edges, ink on paper. So the loose pills become ONE ruled
      instrument — a grid whose 1px gaps let the container colour through as
      dividers, which means the responsive layouts below only ever restate
      `grid-template-columns` and the rules follow by themselves.

   Type: Montserrat is the site's UI voice, but only the 500 face is served.
   Anything heavier here would be a synthesised bold, so every weight in this
   file is 500 and the small labels earn their emphasis from caps and tracking
   instead. Body copy stays in the theme's PT Serif by inheritance.

   Tokens: --gd-* belongs to lc-guide.css, which is enqueued only on
   is_page(['daufuskie','golf','private-aviation']). /golf/tee-times/ has the
   slug 'tee-times', so those variables do NOT resolve there. Each one is
   therefore read through its own literal fallback: the two files stay in step
   on /golf/, and this one still stands up alone on the finder page.
   ========================================================================== */

#lc-golf-finder,
.lcgf-modal {
  --gf-ink:    var(--gd-ink,    #2d2e33);
  --gf-muted:  var(--gd-muted,  #6c6d74);
  --gf-line:   var(--gd-line,   #e5e5e7);
  --gf-accent: var(--gd-accent, #e44e56);
  --gf-well:   var(--gd-well,   #14161a);   /* never #000 */
  --gf-paper:  var(--gd-paper,  #f7f6f4);
  --gf-ease:   var(--gd-ease,   cubic-bezier(.22,.72,0,1));
  --gf-sans:   "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The hairline is right for dividers INSIDE the instrument, but as the only
     outer boundary of a group of controls it falls under 3:1. The frame is the
     ink at low alpha rather than a sixth grey. */
  --gf-frame:  rgba(45, 46, 51, .17);
}

#lc-golf-finder { max-width: 1160px; margin: 0 auto; }

.lcgf-intro {
  max-width: 56ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gf-muted);
}

/* ========================================================== the instrument ==
   Query row and filter row are one enclosed object, not two. The container's
   background IS the rule colour: the filter grid opens 1px gaps and the
   dividers appear through them, so nothing below has to draw a border. */
.lcgf-controls {
  position: relative;
  margin: 20px 0 0;
  border: 1px solid var(--gf-frame);
  background: var(--gf-line);
}
/* The same mark the guide fronts set on a department rule, so the tool reads
   as part of the section system rather than as a widget. */
.lcgf-controls::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 46px;
  height: 3px;
  background: var(--gf-accent);
}

/* ------------------------------------------------------------ the ask box ==
   Flush against its own button. The 8px gap was what stopped the two reading
   as one control. */
.lcgf-nl {
  display: flex;
  margin-bottom: 1px;
  background: #fff;
}
.lcgf-q {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 500 14.5px/1.4 var(--gf-sans);
  color: var(--gf-ink);
  text-overflow: ellipsis;
}
.lcgf-q::placeholder { color: var(--gf-muted); opacity: 1; }
.lcgf-q:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gf-accent);
}

.lcgf-go {
  flex: 0 0 auto;
  /* Fixed floor so swapping the label for its loading state cannot shift the
     row it sits in. */
  min-width: 116px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background: var(--gf-well);
  color: #fff;
  font: 500 11px/1 var(--gf-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lcgf-go:hover { background: var(--gf-accent); }
.lcgf-go:active { background: #c8434a; }
/* Inset, because the button is flush with the field and a positive offset
   would sit on top of it. */
.lcgf-go:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: -5px; }
/* Mid-tone rather than the hairline grey: this state is worn while a search is
   running, and a button the same colour as the rules around it stops looking
   like a button at exactly the moment the user is waiting on it. */
.lcgf-go:disabled {
  background: var(--gf-muted);
  color: #fff;
  cursor: not-allowed;
}

/* ---------------------------------------------------------- the filter row ==
   Deliberate column measures rather than four content-sized pills. The ratios
   are per-field and unchanged: area carries town names and needs the most,
   date needs enough for a full numeric value plus its picker. A track count
   that does not match the number of fields leaves the surplus track empty, and
   because the 1px gaps work by letting the container colour through, an empty
   track does not read as spare room — it reads as a hole punched in the
   instrument. */
.lcgf-filters {
  display: grid;
  gap: 1px;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.05fr) minmax(0, 1.15fr);
}

.lcgf-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Without this the cell inherits a min-content floor from the date input and
     refuses to shrink — the whole reason that field used to run off a phone. */
  min-width: 0;
  margin: 0;
  padding: 11px 15px 12px;
  background: #fff;
  cursor: pointer;
  transition: background .18s var(--gf-ease);
}
.lcgf-field > span {
  font: 500 10px/1 var(--gf-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gf-muted);
  transition: color .18s var(--gf-ease);
}
.lcgf-field:hover { background: var(--gf-paper); }
.lcgf-field:hover > span { color: var(--gf-ink); }
.lcgf-field:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--gf-accent);
}
.lcgf-field:focus-within > span { color: var(--gf-accent); }

/* The controls themselves are borderless: the grid already contains them, and
   a border inside a ruled cell is the doubled outline that made the original
   read as a form. */
.lcgf-field select,
.lcgf-field input {
  width: 100%;
  min-width: 0;
  /* input[type=date] and input[type=text] both computed to content-box here,
     so `width:100%` was resolving to 100% PLUS 20px padding and 2px border.
     That 22px is exactly what pushed the date field past a 414px viewport. */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 500 14px/20px var(--gf-sans);
  color: var(--gf-ink);
  cursor: pointer;
}
.lcgf-field select:focus,
.lcgf-field input:focus { outline: none; }
.lcgf-field select:disabled,
.lcgf-field input:disabled { color: var(--gf-muted); cursor: not-allowed; }

.lcgf-field--sel select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  text-overflow: ellipsis;
}
/* Drawn rather than a background image so it takes currentColor and can answer
   hover and focus with the label.

   Positioned from the TOP, not the bottom. Grid cells stretch to the tallest in
   the row and the date field renders 2px taller than a select, so a bottom
   offset leaves the mark sitting low in every other cell. From the top it is
   deterministic: padding-top + the 10px label + the 5px gap puts the control at
   26px, its centre at 36px, and the mark is nudged 1px above that because the
   visible half of a rotated square reads lower than its own box. */
.lcgf-field--sel::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 32px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--gf-muted);
  pointer-events: none;
  transition: color .18s var(--gf-ease);
}
.lcgf-field--sel:hover::after { color: var(--gf-ink); }
.lcgf-field--sel:focus-within::after { color: var(--gf-accent); }

/* The native date input stays native: on a phone it opens the OS picker, which
   is worth more than any calendar we could draw. Only its chrome is dressed. */
.lcgf-date { font-variant-numeric: tabular-nums; }
.lcgf-date::-webkit-datetime-edit { padding: 0; }
/* Left, not centred — the UA centres the value once the field is wider than
   its text, which reads as a misalignment against the labels above it. */
.lcgf-date::-webkit-date-and-time-value { text-align: left; margin: 0; }
.lcgf-date::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: .45;
  cursor: pointer;
  transition: opacity .18s var(--gf-ease);
}
.lcgf-field--date:hover .lcgf-date::-webkit-calendar-picker-indicator,
.lcgf-date:focus::-webkit-calendar-picker-indicator { opacity: 1; }

/* ------------------------------------------------------------- narrower ==
   Both steps keep DOM order equal to visual order, so tab order never has to
   jump backwards.

   Four fields divide evenly, so two columns fill the grid exactly and no field
   needs a spanning rule to close the row. Three columns cannot hold four
   fields: the fourth takes a row of its own and leaves a third of that row
   empty, which the 1px-gap construction paints as a hole rather than as space.

   The date input is what sets the floor. Measured intrinsic widths: area
   163/81.61 max/min-content, access 143/102.13, budget 132/107.52, and date
   160/160 — rigid, it will not compress at all. Three equal columns would in
   fact have cleared that, so the old span-2 was comfort rather than necessity;
   four fields dividing evenly into 2x2 removes the special case instead of
   restating it. The tightest point of the new layout is 900px, where the date
   cell measures 209.20px against a 179px input. */
@media (max-width: 899px) {
  .lcgf-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  /* Column count carries over from the step above; only the two fields that
     want the full measure are restated. */
  .lcgf-field--area,
  .lcgf-field--date { grid-column: 1 / -1; }
  .lcgf-q { padding: 14px 15px; }
  .lcgf-go { min-width: 92px; padding: 0 18px; }
  .lcgf-field { padding: 10px 14px 11px; }
  .lcgf-field--sel::after { top: 31px; right: 15px; }   /* follows the 1px less padding-top */
}

/* ============================================================== the readout ==
   The instrument's answer, set as a readout rather than a sentence. */
.lcgf-count {
  margin: 15px 0 16px;
  font: 500 11px/1.5 var(--gf-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gf-muted);
}

/* ================================================================ results ==
   Squared to the same edge as the instrument: a 10px-radius card under a
   hard-cornered control panel is the join that gives a page away. */
.lcgf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.lcgf-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gf-line);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s var(--gf-ease), box-shadow .2s var(--gf-ease);
}
.lcgf-card:hover { border-color: var(--gf-frame); box-shadow: 0 10px 26px rgba(20, 22, 26, .09); }
.lcgf-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--gf-paper); }
.lcgf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcgf-noimg { display: flex; align-items: center; justify-content: center; font-size: 2rem; text-decoration: none; }
.lcgf-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lcgf-badge { font: 500 10px/1 var(--gf-sans); letter-spacing: .18em; text-transform: uppercase; }
.lcgf-body h3 { margin: 3px 0 2px; font-size: 1.02rem; line-height: 1.25; }
.lcgf-body h3 a { color: var(--gf-ink); text-decoration: none; }
.lcgf-body h3 a:hover { color: var(--gf-accent); }
.lcgf-spec { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--gf-muted); }
.lcgf-foot { margin: 6px 0 0; display: flex; align-items: baseline; justify-content: space-between; }
.lcgf-fee { font-weight: 700; color: var(--gf-ink); }
.lcgf-rating { font-size: .85rem; color: #8a6d2f; }
/* The action and the access badge are both small sans labels, so size alone
   stopped separating them once the card was set in one family. The rule and the
   space above it are what make this read as the card's footer rather than as a
   third piece of metadata. */
.lcgf-book {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--gf-line);
  font: 500 11px/1 var(--gf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3d7a4f;
  transition: color .18s var(--gf-ease);
}
.lcgf-book:hover { color: var(--gf-accent); }
.lcgf-card a:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 2px; }

.lcgf-empty {
  grid-column: 1/-1;
  max-width: 46ch;
  margin: 0 auto;
  padding: 46px 0 50px;
  text-align: center;
  color: var(--gf-muted);
  font-size: .95rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ========================================================= private clubs ==
   The 2px slab rule and the #111 it used are the pattern the guide fronts
   already retired; this is the same department rule they set instead. */
.lcgf-private { position: relative; margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--gf-line); }
.lcgf-private::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--gf-accent);
}
.lcgf-private h2 { margin: 0 0 2px; }
.lcgf-sub { margin: 0 0 16px; max-width: 60ch; color: var(--gf-muted); font-size: .92rem; line-height: 1.6; }
.lcgf-priv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lcgf-priv {
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--gf-line);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  font: 500 13px/1.35 var(--gf-sans);
  color: var(--gf-ink);
  transition: border-color .18s var(--gf-ease), background .18s var(--gf-ease);
}
.lcgf-priv:hover { border-color: var(--gf-frame); background: var(--gf-paper); }
.lcgf-priv:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 2px; }
.lcgf-priv span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gf-muted); }

/* ============================================================== the modal ==
   Appended to <body>, so it sits outside #lc-golf-finder and carries its own
   token scope (see the top of this file). */
.lcgf-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  /* Centred by auto margins on the box rather than by align-items, so that on a
     short viewport the dialog scrolls instead of having its top cropped off
     beyond reach — a landscape phone is shorter than this form is tall. */
  overflow-y: auto;
  padding: 18px;
  background: rgba(20, 22, 26, .62);
}
.lcgf-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 30px 30px 32px;
  background: #fff;
  border-radius: 0;
}
.lcgf-box h3 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.25; color: var(--gf-ink); }
.lcgf-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gf-muted);
  cursor: pointer;
  transition: color .18s var(--gf-ease);
}
.lcgf-x:hover { color: var(--gf-ink); }
.lcgf-x:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 0; }

/* The modal's fields are standalone, so unlike the instrument's cells they do
   carry their own rule — but it is the same square, hairline vocabulary. */
.lcgf-in {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--gf-line);
  border-radius: 0;
  background: #fff;
  font: 500 14px/1.4 var(--gf-sans);
  color: var(--gf-ink);
}
.lcgf-in::placeholder { color: var(--gf-muted); opacity: 1; }
.lcgf-in:hover { border-color: var(--gf-frame); }
/* Ink, not the accent. The accent is the house red and this form reports its
   errors in red, so an accent focus ring would mark whichever field the user is
   currently typing in as the invalid one. The filter cells above can use the
   accent freely because nothing there can be invalid. */
.lcgf-in:focus {
  outline: none;
  border-color: var(--gf-ink);
  box-shadow: inset 0 0 0 1px var(--gf-ink);
}
.lcgf-in:disabled { background: var(--gf-paper); color: var(--gf-muted); cursor: not-allowed; }
textarea.lcgf-in { resize: vertical; min-height: 84px; }

.lcgf-hp { position: absolute !important; left: -9999px; }
.lcgf-err {
  margin: 0 0 10px;
  font: 500 12px/1.5 var(--gf-sans);
  color: #b0333b;
}
.lcgf-err:empty { display: none; }
.lcgf-submit {
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 0;
  background: var(--gf-well);
  color: #fff;
  font: 500 11px/1 var(--gf-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.lcgf-submit:hover { background: var(--gf-accent); }
.lcgf-submit:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 3px; }
.lcgf-submit:disabled { background: var(--gf-muted); color: #fff; cursor: not-allowed; }
.lcgf-done p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--gf-ink); }

@media (prefers-reduced-motion: reduce) {
  #lc-golf-finder *,
  .lcgf-modal * { transition: none !important; }
}