/* LouJi™ mobile layout corrections.
 *
 * Loaded last so it wins over the per-page <style> blocks without !important.
 *
 * 1. Plan bullets. `.lj-route li` was `display:flex`, so the tick pseudo-element
 *    and every <span> inside the bullet each became a separate flex column. A
 *    bullet carrying two figures ("minimum invoice X on 36 months, Y on 12")
 *    collapsed into overlapping columns on a narrow screen. The tick is now
 *    absolutely positioned and the text flows as normal inline content.
 *
 * 2. The fixed header background was rgba(...,.9), so page text scrolling
 *    beneath it stayed visible through it and every screen looked like
 *    overlapping broken type. It is opaque now.
 *
 * 3. #apply and other in-page anchors landed underneath that fixed header.
 *
 * 4. Section rhythm on phones: headings were sitting directly on the divider
 *    above them with no breathing room.
 */

/* ---- 1. bullets flow as text again -------------------------------------- */
.lj-route li,
.lj-route ul li {
  display: block;
  position: relative;
  padding-left: 1.55rem;
}
.lj-route li::before {
  position: absolute;
  left: 0;
  top: .26rem;
  margin-top: 0;
}
/* keep the value visually attached to its label rather than orphaned */
.lj-route li [data-lj] {
  white-space: nowrap;
}

/* ---- 2. opaque header, nothing shows through ---------------------------- */
header,
header.scrolled,
#site-header,
#site-header.scrolled {
  background: var(--bg);
}

/* ---- 3. anchors clear the fixed header ---------------------------------- */
html {
  scroll-padding-top: 5.75rem;
}

/* ---- 4. section rhythm on phones ---------------------------------------- */
@media (max-width: 700px) {
  .section-head h2,
  .section > .wrap > h2 {
    margin-top: 0;
    line-height: 1.15;
  }
  /* the two-up Buy / Lease split needs room once it stacks */
  .lj-split > div + div {
    margin-top: .2rem;
  }
  .lj-route {
    padding: 1.5rem 1.25rem 1.35rem;
  }
  .lj-route li {
    font-size: .92rem;
    line-height: 1.5;
    margin-bottom: .1rem;
  }
}

/* ---- 5. never let a long figure push the page sideways ------------------ */
@media (max-width: 700px) {
  .lj-route,
  .lj-split > div,
  .section-head {
    min-width: 0;
  }
  .lj-amt {
    overflow-wrap: anywhere;
  }
}

/* ---- 6. one language/currency switcher per phone screen ------------------
   partners, privacy, terms and cookie-policy carry a switcher in the header
   nav AND in the footer, so a phone showed two sets of EN/FR/euro/dollar
   pills. Content pages keep theirs inside the mobile menu. On a phone the
   header copy is the redundant one wherever a footer copy exists. */
@media (max-width: 700px) {
  .nav-right .lang-switch { display: none; }
}

/* ---- 7. mobile menu panel for the legal and partnership pages -----------
   partners, privacy, terms and cookie-policy carried the button styling but
   never the panel, so those pages had no way to reach navigation on a phone.
   The panel markup now matches the content pages; this supplies its styling
   for the pages whose own <style> block does not define it. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu .btn { margin-top: 1rem; }
.mobile-close {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

/* ======================================================================
   8. Cross-page consistency pass.
   Each page carried its own header CSS, so the wordmark, the menu button
   and the section rhythm drifted apart. These rules normalise all three at
   every width, phone, tablet and desktop.
   ====================================================================== */

/* ---- 8a. one wordmark, one size, everywhere -----------------------------
   .logo was 1.5rem on content pages, 1.2rem on the legal pages, then
   overridden again at 1.25 / 1.05 / 0.95rem in three media queries, with two
   different letter-spacings. Selector depth here beats every page rule. */
header .nav .logo,
header .wrap .logo {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
}
@media (max-width: 700px) {
  header .nav .logo,
  header .wrap .logo { font-size: 1.2rem; }
}
@media (max-width: 380px) {
  header .nav .logo,
  header .wrap .logo { font-size: 1.08rem; }
}

/* ---- 8b. the menu button had default browser chrome on the legal pages,
   which is the grey rounded box, and sat above the wordmark baseline. */
header .menu-toggle,
.menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ink);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
}

/* ---- 8c. the cost list collapsed into columns for the same reason the plan
   bullets did: the tick and each <span> were siblings in a flex row, which
   is why "$173per kg" lost its space and labels split mid-phrase. */
.lj-inc div {
  display: block;
  position: relative;
  padding-left: 1.55rem;
}
.lj-inc div::before {
  position: absolute;
  left: 0;
  top: .82rem;
  margin-top: 0;
}
.lj-inc [data-lj] { white-space: nowrap; }
@media (max-width: 900px) {
  .lj-inc { grid-template-columns: 1fr; }
}

/* ---- 8d. the BEST KILO PRICE tag sits above the card edge, so the card grid
   needs clearance or the tag lands on the paragraph above it. */
.lj-routes { margin-top: 1.9rem; }

/* ---- 8e. primary actions are full width and centred on a phone, so every
   card and form ends the same way instead of a left-hugging button. */
@media (max-width: 700px) {
  .btn-primary,
  .lj-route .btn,
  #pt-submit,
  #lj-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  header .btn-primary,
  .mobile-menu .btn-primary,
  .lang-btn {
    width: auto;
  }
}

/* ---- 8f. spacing between a heading and what follows it, at every width --- */
.section-head { margin-bottom: 1.8rem; }
.section-head h2 { margin-top: 0; }
.section-head p { margin-top: 1rem; }
h2 + p, h3 + p { margin-top: .75rem; }
@media (min-width: 701px) {
  .section-head { margin-bottom: 2.2rem; }
}

/* ---- 8g. never orphan a unit or a single letter onto its own line -------- */
.lj-route li,
.lj-inc div,
.section-head p { text-wrap: pretty; }

/* ======================================================================
   9. Desktop pass.
   The earlier work was verified at phone widths only, so several rules
   were scoped to max-width:700px and desktop kept the original faults.
   Everything here applies at every width unless stated.
   ====================================================================== */

/* ---- 9a. section rhythm ------------------------------------------------
   Nothing in the site defined padding on <section class="section">, so every
   heading sat directly on the divider above it. This is the single reason
   "What is included", "Specifications" and "Taste it on your own bar first"
   all looked jammed into the block before them. */
.section {
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
}
.section-head {
  margin-bottom: clamp(1.5rem, 2.4vw, 2.3rem);
}

/* ---- 9b. the menu must work at every width -----------------------------
   The panel was hidden above 900px while the button stayed visible, so on a
   desktop the hamburger was dead on every page. The panel now opens at any
   width, which is what the button promises. */
.mobile-menu {
  display: flex;
}

/* ---- 9c. one switcher location, at every width -------------------------
   The header switcher was hidden on phones only, so on a desktop the legal
   and partnership pages suddenly showed EN/FR/euro/dollar in the header and
   the content pages did not. It lives in the menu now, everywhere. */
.nav-right .lang-switch,
header .nav-right .lang-switch {
  display: none;
}

/* ---- 9d. two cards should fill the row ---------------------------------
   .lj-routes is a fixed three-column grid. The Matcha page has two plan
   cards, so they occupied two of three columns and left a third of the row
   empty. Auto-fit makes any number of cards fill the width. */
.lj-routes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Three route cards must be three across or fully stacked. Between those two
   the auto-fit grid fitted two and left the third orphaned on its own row. */
@media (min-width: 640px) and (max-width: 1060px) {
  .lj-routes { grid-template-columns: 1fr; }
  .lj-route { max-width: 34rem; margin-inline: auto; }
}

/* ---- 9e. aligned actions ----------------------------------------------
   Card and form actions were left-hugging at different widths per card. */
.lj-route .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
#pt-submit,
#lj-submit {
  display: inline-flex;
  justify-content: center;
  text-align: center;
}
@media (min-width: 701px) {
  #pt-submit,
  #lj-submit {
    margin-inline: auto;
  }
}

/* ---- 9f. a secondary action must still look like a button --------------
   .btn-ghost carries no border, so on a card the 12-month action rendered as
   bare centred text beside a filled 36-month button and read as broken. */
.lj-route .btn-ghost,
.lj-split .btn-ghost {
  border: 1px solid var(--matcha-deep);
  color: var(--matcha-deep);
  background: transparent;
}
.lj-route .btn-ghost:hover,
.lj-split .btn-ghost:hover {
  background: rgba(88, 102, 38, .07);
}

/* ---- 9g. one-cell price block ------------------------------------------
   The Buy card used to hold two cells, Buy and Lease. The lease route is gone,
   so a two-column grid left the single remaining block squeezed into half the
   card with the price paragraph wrapping into a narrow tower. Auto-fit lets
   one cell fill the card and two cells still sit side by side if they return. */
.lj-split {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* ---- 9h. the three route cards should read as one row ------------------
   Equal top alignment and a consistent inner rhythm, so a short card does not
   look broken beside a long one. */
.lj-routes > .lj-route {
  align-self: stretch;
}
.lj-route > ul {
  margin-top: auto;
}
.lj-split .lj-amt {
  font-size: 1.6rem;
  line-height: 1.15;
}
.lj-split > div {
  padding: 1.1rem 1.05rem;
}

/* ---- 9i. card actions on one line ---------------------------------------
   The Pilot card carries fewer bullets, so its action sat about 18px above
   the other two. Making the card a column and pushing the footer down aligns
   every primary action across the row at any card height. */
.lj-route {
  display: flex;
  flex-direction: column;
}
.lj-route > ul {
  flex: 1 1 auto;      /* the bullet list absorbs the spare height */
}
.lj-route > .lj-foot {
  margin-top: 0;
}
.lj-route > .lj-fine {
  margin-top: .75rem;
}

/* ---- 9j. no decorative rule before an eyebrow ---------------------------
   .eyebrow::before drew a 26px gold line, which reads as a dash on the page
   even though no dash character exists in the copy. Louis rule: nothing that
   looks like a dash, anywhere. Removed at every width. */
.eyebrow::before {
  display: none !important;
  content: none !important;
}
.eyebrow {
  gap: 0;
}