/* LCE Parking Finder — scoped styles, v1.2.0
 *
 * Visual language deliberately matches lce-ferry-planner as it stands after the
 * 25 Aug reskin, because both tools appear in the same article and must read as
 * one system. Values copied, not imported: the planner is live in six articles
 * across eleven languages and nothing about parking should be able to restyle a
 * timetable. Tokens read from the running planner on 30 Aug 2026:
 *   white ground · #E4E4E4 hairlines · #B8956A gold · #1B3A4B navy · #DCEDF7 azure
 *
 * Three house rules are enforced here and are not preferences:
 *   1. NO HOVER EFFECTS ANYWHERE. Settled 25 August. Affordance is explicit
 *      instead, and :focus-visible carries the keyboard state hover would give.
 *   2. Body type INHERITS the theme. Never name a face — measured 27 Aug, the
 *      site runs Be Vietnam Pro globally and Inter in articles; Lato is absent.
 *      Playfair is used for headings only, at weight 600, the weight the site
 *      actually loads.
 *   3. Every control restates text-transform and letter-spacing. Kadence styles
 *      bare <button> with uppercase, which leaked into the chips on first deploy.
 */

.lce-parking{
  --lcp-ink:#1B3A4B;
  --lcp-ink-soft:#4A6472;
  --lcp-muted:#7C8A93;
  --lcp-line:#E4E4E4;
  --lcp-gold:#B8956A;
  --lcp-azure:#DCEDF7;
  --lcp-azure-edge:#7FB3D0;
  --lcp-ok:#3B6F55;
  --lcp-warn:#8A6520;
  --lcp-warn-bg:#FBF6EC;
  --lcp-stop:#9A4034;

  background:#fff;
  color:var(--lcp-ink);
  font-family:inherit;
  font-size:16px;
  line-height:1.6;
  margin:34px 0;
  border:0;
}
.lce-parking *,
.lce-parking *::before,
.lce-parking *::after{box-sizing:border-box}

/* ---------- header: Playfair title over a 1px gold hairline ---------- */
.lce-parking__head{padding:0 0 12px}
.lce-parking__head h3{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:600;font-size:24px;line-height:1.2;
  margin:0;color:var(--lcp-ink);letter-spacing:-.005em;
}
.lce-parking__head::after{
  content:"";display:block;height:1px;background:var(--lcp-gold);margin-top:12px;
}
.lce-parking__body{padding:20px 0 0;display:flex;flex-direction:column;gap:20px}

/* ---------- controls ---------- */
.lce-parking fieldset{border:0;margin:0;padding:0;min-width:0}
.lce-parking legend{
  padding:0;margin:0 0 10px;font-size:13px;font-weight:700;
  color:var(--lcp-ink);text-transform:none;letter-spacing:normal;
}
.lce-parking__row{display:flex;flex-wrap:wrap;gap:18px 26px}
.lce-parking__row fieldset{flex:1 1 210px}
.lce-parking__chips{display:flex;flex-wrap:wrap;gap:7px}

.lce-parking__chip{
  font:inherit;font-size:13.5px;line-height:1.45;font-weight:400;
  text-transform:none;letter-spacing:normal;
  background:#fff;color:var(--lcp-ink-soft);
  border:1px solid var(--lcp-line);border-radius:999px;
  padding:6px 15px;cursor:pointer;margin:0;
  box-shadow:none;text-shadow:none;text-decoration:none;
  min-height:0;height:auto;width:auto;
}
.lce-parking__chip[aria-pressed="true"]{
  background:var(--lcp-ink);border-color:var(--lcp-ink);color:#fff;font-weight:700;
}
.lce-parking__chip:focus-visible{outline:2px solid var(--lcp-gold);outline-offset:2px}
.lce-parking__chip .n{
  font-size:11px;opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums;font-weight:400;
}
/* No hover state, deliberately. See rule 1 at the top of this file. */

.lce-parking__rule{height:1px;background:var(--lcp-line);border:0;margin:0}

/* ---------- results: rows on hairlines, not boxed cards ---------- */
.lce-parking__results{display:flex;flex-direction:column}

.lce-parking__card{
  display:grid;
  grid-template-columns:3px 1fr auto;
  border:0;border-bottom:1px solid var(--lcp-line);
  background:#fff;
}
.lce-parking__results .lce-parking__card:first-child{border-top:1px solid var(--lcp-line)}

/* the grade rail — the one place this widget spends any colour */
.lce-parking__stripe{background:transparent;margin:14px 0}
.lce-parking__card[data-conf="A"] .lce-parking__stripe{background:var(--lcp-ok)}
.lce-parking__card[data-conf="B"] .lce-parking__stripe{background:var(--lcp-gold)}
.lce-parking__card[data-conf="C"] .lce-parking__stripe{background:#D8D2C7}

.lce-parking__main{padding:14px 18px;display:flex;flex-direction:column;gap:7px;min-width:0}
.lce-parking__main h4{
  font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:18px;
  line-height:1.3;margin:0;color:var(--lcp-ink);
}
.lce-parking__price{
  padding:14px 0 14px 18px;text-align:right;
  display:flex;flex-direction:column;justify-content:center;
  background:transparent;border:0;min-width:112px;
}
.lce-parking__amount{
  font-size:20px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--lcp-ink);letter-spacing:-.01em;
}
.lce-parking__amount small{
  display:block;font-size:10px;font-weight:400;color:var(--lcp-muted);
  letter-spacing:.08em;text-transform:uppercase;white-space:normal;margin-top:2px;
}

.lce-parking__meta{display:flex;flex-wrap:wrap;gap:6px}
.lce-parking__tag{
  font-size:10.5px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--lcp-line);border-radius:2px;padding:2px 7px;
  color:var(--lcp-muted);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.lce-parking__tag--ok{color:var(--lcp-ok);border-color:rgba(59,111,85,.4)}
.lce-parking__tag--warn{color:var(--lcp-warn);border-color:rgba(138,101,32,.4)}
.lce-parking__tag--crit{color:var(--lcp-stop);border-color:rgba(154,64,52,.4)}

.lce-parking__note{font-size:14px;color:var(--lcp-ink-soft);margin:0}
.lce-parking__links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;align-items:baseline}
.lce-parking__links a{color:var(--lcp-gold);text-underline-offset:3px}
.lce-parking__links a:focus-visible{outline:2px solid var(--lcp-gold);outline-offset:2px}
.lce-parking__links .lce-parking__note{font-size:12.5px;color:var(--lcp-muted)}

/* ---------- panels ---------- */
.lce-parking__banner,
.lce-parking__ztl{
  border:0;border-left:3px solid var(--lcp-azure-edge);
  background:var(--lcp-azure);
  padding:15px 18px;display:flex;flex-direction:column;gap:6px;
}
.lce-parking__ztl{border-left-color:var(--lcp-warn);background:var(--lcp-warn-bg)}
.lce-parking__eyebrow{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lcp-ink-soft);margin:0;font-weight:700;
}
.lce-parking__eyebrow--warn{color:var(--lcp-warn)}
.lce-parking__banner h4,
.lce-parking__ztl h4{
  font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:19px;
  margin:0;color:var(--lcp-ink);line-height:1.3;
}
.lce-parking__banner p,
.lce-parking__ztl p{font-size:14.5px;color:var(--lcp-ink-soft);margin:0}
.lce-parking__ztl .lce-parking__links a{color:var(--lcp-warn)}

.lce-parking__empty{
  padding:24px 0;color:var(--lcp-muted);font-size:14.5px;
  border-top:1px solid var(--lcp-line);border-bottom:1px solid var(--lcp-line);
}

.lce-parking__legend{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--lcp-muted);
}
.lce-parking__legend span{display:flex;align-items:center;gap:7px}
.lce-parking__dot{width:8px;height:8px;border-radius:50%;flex:none}
.lce-parking__dot--a{background:var(--lcp-ok)}
.lce-parking__dot--b{background:var(--lcp-gold)}
.lce-parking__dot--c{background:#D8D2C7}

/* Attribution is an ODbL licence condition. Do not remove. */
.lce-parking__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;
  padding:14px 0 0;margin-top:4px;border-top:1px solid var(--lcp-line);
  font-size:11.5px;letter-spacing:.02em;color:var(--lcp-muted);
}
.lce-parking__noscript{padding:16px 0;margin:0;color:var(--lcp-ink-soft)}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .lce-parking{font-size:15.5px;margin:26px 0}
  .lce-parking__head h3{font-size:21px}
  .lce-parking__body{gap:18px}
  .lce-parking__row{gap:16px}
  .lce-parking__row fieldset{flex:1 1 100%}
  .lce-parking__card{grid-template-columns:3px 1fr}
  .lce-parking__main{padding:13px 14px 4px}
  .lce-parking__main h4{font-size:17px}
  .lce-parking__price{
    grid-column:2;padding:0 14px 14px;text-align:left;
    flex-direction:row;align-items:baseline;gap:9px;
  }
  .lce-parking__amount{font-size:18px}
  .lce-parking__amount small{display:inline;margin:0}
  .lce-parking__stripe{margin:0}
  .lce-parking__foot{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .lce-parking *{transition:none !important;animation:none !important}
}

/* ---------- theme-defence ----------
 * Kadence styles bare <button> and, in places, `.entry-content button`, which
 * outranks a single class. On the first deploy this rendered every chip in
 * SHOUTING CAPITALS. These rules are deliberately two classes deep so they win
 * without needing !important, and they restate everything a theme button rule
 * commonly sets. Do not "tidy" them away.
 */
.lce-parking .lce-parking__chip,
.lce-parking .lce-parking__chip[aria-pressed="true"]{
  text-transform:none;
  letter-spacing:normal;
  font-style:normal;
  border-radius:999px;
  box-shadow:none;
  text-decoration:none;
  min-width:0;
  line-height:1.45;
}
.lce-parking .lce-parking__tag{text-transform:uppercase;letter-spacing:.06em}
.lce-parking .lce-parking__main h4,
.lce-parking .lce-parking__head h3{text-transform:none;letter-spacing:-.005em}
/* Restate the resting background explicitly on hover/focus rather than using
   `inherit` — the handbook records that `background:inherit` resolves to the
   PARENT's background and silently erased the ferry tabs' white pill fill. */
.lce-parking .lce-parking__chip:hover,
.lce-parking .lce-parking__chip:focus{background-color:#fff;color:var(--lcp-ink-soft);border-color:var(--lcp-line)}
.lce-parking .lce-parking__chip[aria-pressed="true"]:hover,
.lce-parking .lce-parking__chip[aria-pressed="true"]:focus{background-color:var(--lcp-ink);color:#fff;border-color:var(--lcp-ink)}

/* the "+ n more towns" control reads as a control, not as another destination */
.lce-parking .lce-parking__chip--more{
  border-style:dashed;
  color:var(--lcp-gold);
  border-color:var(--lcp-gold);
}