/* LCE Guides — commerce panel inside the ferry planner.
 *
 * Namespaced .lcgf-* so nothing here can collide with the ferry planner's own
 * .lce-* rules, and so the ferry widget's delegated click/change handlers —
 * which match on .lce-langpill and .lce-gcheck — never fire on our controls
 * and re-render the old panel on top of this one.
 *
 * Tokens are the ferry planner's, not new ones: navy #1B3A4B, gold #B8956A,
 * hairline #E2E6EA, Playfair for headings, the theme's own face for text.
 * No shadows, no
 * hover transforms, no transitions — same restraint as the rest of the site.
 */

.lcgf{
  --lcgf-navy:#1B3A4B; --lcgf-gold:#B8956A; --lcgf-gold-ink:#9C7A48;
  --lcgf-hair:#E2E6EA; --lcgf-white:#FFFFFF; --lcgf-grey:#6B7B8D;
  --lcgf-ink2:#4A6472; --lcgf-strike:#8A99A6; --lcgf-err:#9B2C2C;
  /* The page's own text font, not a font of our own. Kadence serves Inter
   * inside the article and Be Vietnam Pro elsewhere; inheriting means the
   * panel follows whatever Eugen sets in the theme instead of drifting away
   * from it the next time he changes it. */
  font-family:inherit;
  color:var(--lcgf-navy); display:flex; flex-direction:column; min-width:0;
}
.lcgf *{box-sizing:border-box}

.lcgf-eyebrow{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--lcgf-gold-ink); margin:0 0 10px;
}
.lcgf-ttl{
  font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:21px;
  line-height:1.2; margin:0 0 10px; color:var(--lcgf-navy);
}
.lcgf-sell{font-size:15px; color:var(--lcgf-ink2); margin:0 0 20px; max-width:44ch; line-height:1.55}

/* ---- the stack of covers: what the buyer actually sees ---- */
.lcgf-stack{display:flex; gap:8px; align-items:flex-end; margin:0 0 18px; flex-wrap:wrap}
.lcgf-cov{
  flex:0 0 auto; width:52px; height:73px; border:1px solid var(--lcgf-hair);
  background:var(--lcgf-navy); color:#fff; border-radius:1px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:6px; overflow:hidden; position:relative;
}
.lcgf-cov::before{content:""; position:absolute; left:6px; top:7px; width:18px; height:2px; background:var(--lcgf-gold)}
.lcgf-cov span{
  font-family:'Playfair Display',Georgia,serif; font-size:9px; line-height:1.15;
  font-weight:600; letter-spacing:.01em; color:#fff;
}

/* ---- one row per village on the route ---- */
.lcgf-rows{display:flex; flex-direction:column; border-top:1px solid var(--lcgf-hair); margin:0 0 18px}
.lcgf-row{
  display:flex; align-items:center; gap:12px; padding:12px 2px;
  border-bottom:1px solid var(--lcgf-hair); cursor:pointer; margin:0;
}
.lcgf-row input{width:17px; height:17px; accent-color:var(--lcgf-navy); flex:0 0 auto; cursor:pointer; margin:0}
/* 34x48 at 6.5px broke "Varenna" across two lines and printed "Varenn / a".
 * Widened until the longest single word on the lake fits on one line; names
 * of two and three words still wrap, which is what they should do. */
.lcgf-row .lcgf-cov{width:46px; height:64px; padding:5px}
.lcgf-row .lcgf-cov::before{width:15px; height:2px; left:5px; top:6px}
.lcgf-row .lcgf-cov span{font-size:7.5px; line-height:1.12; overflow-wrap:normal; word-break:normal; hyphens:none}
.lcgf-vn{font-weight:700; font-size:15px}
.lcgf-vs{font-size:12.5px; color:var(--lcgf-grey); margin-left:auto; text-align:right; font-variant-numeric:tabular-nums}

/* ---- one language for the whole set ---- */
.lcgf-langlbl{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--lcgf-grey); margin:0 0 8px;
}
.lcgf-langs{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 18px}
.lcgf-lang{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--lcgf-white); color:var(--lcgf-navy); border:1px solid var(--lcgf-hair);
  border-radius:999px; padding:7px 14px; cursor:pointer; font-family:inherit; line-height:1.2;
}
.lcgf-lang.on{background:var(--lcgf-navy); color:var(--lcgf-white); border-color:var(--lcgf-navy)}

/* ---- email + the Art. 59 tick, without which nothing may be delivered ---- */
.lcgf-field{display:block; margin:0 0 14px}
.lcgf-field > span{
  display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--lcgf-grey); margin:0 0 6px;
}
.lcgf-field input[type=email]{
  width:100%; font-family:inherit; font-size:15px; color:var(--lcgf-navy);
  background:var(--lcgf-white); border:1px solid var(--lcgf-hair); border-radius:2px;
  padding:11px 13px;
}
.lcgf-consent{display:flex; gap:10px; align-items:flex-start; margin:0 0 8px; cursor:pointer}
.lcgf-consent input{width:17px; height:17px; accent-color:var(--lcgf-navy); flex:0 0 auto; margin:2px 0 0; cursor:pointer}
.lcgf-consent span{font-size:12.5px; line-height:1.45; color:var(--lcgf-ink2)}
.lcgf-note{font-size:12px; color:var(--lcgf-grey); margin:0 0 16px; line-height:1.45}

/* ---- price and buy ---- */
.lcgf-pricerow{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--lcgf-hair);
}
.lcgf-pv{
  font-family:'Playfair Display',Georgia,serif; font-size:29px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--lcgf-navy);
}
.lcgf-was{font-size:13.5px; color:var(--lcgf-strike)}
.lcgf-was s{text-decoration-thickness:1px}
.lcgf-buy{
  font-size:.79rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  background:var(--lcgf-navy); color:var(--lcgf-white); border:1px solid var(--lcgf-navy);
  border-radius:999px; padding:11px 28px; cursor:pointer; font-family:inherit; line-height:1.2;
  margin-left:auto;
}
.lcgf-buy[disabled]{opacity:.4; cursor:default}
.lcgf-fine{font-size:12.5px; color:var(--lcgf-grey); margin:13px 0 0; line-height:1.45}
/* The honest line about a village on the route we cannot sell yet. Quiet —
 * it is information, not an error, and it sits under the offer rather than
 * interrupting it. */
.lcgf-missing{
  font-size:12.5px; line-height:1.45; color:var(--lcgf-grey);
  margin:10px 0 0; padding-left:11px; border-left:2px solid var(--lcgf-hair);
}
.lcgf-err{font-size:13px; color:var(--lcgf-err); margin:12px 0 0; line-height:1.45}
.lcgf-err:empty{display:none}

.lcgf-lang:focus-visible,
.lcgf-buy:focus-visible,
.lcgf-row input:focus-visible,
.lcgf-consent input:focus-visible,
.lcgf-field input:focus-visible{outline:2px solid var(--lcgf-gold-ink); outline-offset:2px}

@media (max-width:520px){
  .lcgf-ttl{font-size:19px}
  .lcgf-buy{margin-left:0; width:100%; text-align:center}
}


/* =======================================================================
 * THE FERRY PLANNER'S OWN TYPOGRAPHY, corrected from here.
 *
 * widget.css hard-codes Lato as the planner's base font, and every
 * `font-family:inherit` inside it — tabs, selects, buttons, pills — inherits
 * from that one declaration. On the live site that put Lato directly beside
 * article text set in Inter. That is the mismatch Eugen saw.
 *
 * Playfair Display is NOT removed. It is the site's own heading face — every
 * h1 and h2 on the page is set in it — so the planner's headings, times and
 * guide covers keep speaking in it. What changes is the text face beside it.
 *
 * Done from here because the ferry plugin's asset folder cannot be written to
 * on this host. A later stylesheet is the one tool that reaches it. Selectors
 * are deliberately over-specific: widget.css already doubles `.lce-ferry` in
 * places, and load order between two plugins is not something to depend on.
 * ==================================================================== */
[data-lce-ferry].lce-ferry.lce-ferry,
.lcgf,
.lce-guide{
	/* The theme's text stack, named once. Kadence serves Inter inside the
	 * article and Be Vietnam Pro around it; both are listed so the planner
	 * reads correctly wherever it is placed. Used only by the few labels that
	 * sit inside a serif parent and therefore cannot simply inherit. */
	--lcgf-text:Inter,'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* The bulk of it: inherit, so the planner follows whatever Eugen sets in the
 * theme rather than pinning a font of its own that drifts the next time he
 * changes one. */
[data-lce-ferry].lce-ferry.lce-ferry,
[data-lce-ferry].lce-ferry.lce-ferry .lce-tab,
[data-lce-ferry].lce-ferry.lce-ferry select,
[data-lce-ferry].lce-ferry.lce-ferry input,
[data-lce-ferry].lce-ferry.lce-ferry button,
[data-lce-ferry].lce-ferry.lce-ferry .lce-more{ font-family:inherit }

/* These two are the small caps under a departure time — "TAP TO SELECT" and
 * the leg label. Their parent is Playfair, so `inherit` would have handed
 * them the serif instead of the text face. Named stack, not inherit. */
[data-lce-ferry].lce-ferry.lce-ferry .lce-jt small,
[data-lce-ferry].lce-ferry.lce-ferry .lce-arrbig small{ font-family:var(--lcgf-text) }

/* Playfair Display is loaded at 500 and 600 only — the two weights the site
 * itself uses. Three rules in widget.css ask for 400 and 700, and the browser
 * answers by synthesising them: a smeared faux-bold on the timeline times, a
 * fake light on the crossing durations. Nothing reads more off-brand than a
 * synthesised weight of a high-contrast serif. Snapped to what exists. */
[data-lce-ferry].lce-ferry.lce-ferry .lce-timeline .tm{ font-weight:600 }
[data-lce-ferry].lce-ferry.lce-ferry .lce-dur,
[data-lce-ferry].lce-ferry.lce-ferry .lce-brandtag{ font-weight:500 }

/* The Terms link beside the consent tick. Underlined on purpose — it is a
 * link in the middle of a sentence, and the one place on this panel where
 * looking like a link matters more than looking like the brand. */
.lcgf-consent a.lcgf-terms{
  color:var(--lcgf-navy); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px; white-space:nowrap;
}