/* ==== SLOT:WP4 landing-bottom+contact+footer ==== */
/* Partners marquee, Klar til Indien, FAQ, shared contact form and footer. Prefix lb-. */

/* ---- Samarbejdspartnere: self-scrolling logo marquee (client-requested
   exception to "nothing moves unless the visitor scrolls"). JS drives the
   offset and eases the speed down on hover, so it slows without a jump. */
.lb-partners { background: var(--white); padding: var(--space-7) 0 var(--space-6); }
/* No visible title (Martin, 2026-10-05); kept for screen readers, since it names the section. */
.lb-partners-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lb-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.lb-marquee-track { display: flex; width: max-content; will-change: transform; }
.lb-logo-set { display: flex; align-items: center; gap: 72px; padding-right: 72px; list-style: none; }
.lb-logo { flex: none; display: flex; align-items: center; height: 64px; }
.lb-logo img { height: 44px; width: auto; display: block; mix-blend-mode: multiply; }
.lb-logo img.lb-logo-tall { height: 64px; }
.lb-logo img.lb-logo-ergo { height: 24px; }   /* the real mark has no padding; matches the placeholders' cap height */
/* Static fallback (reduced motion, or JS sets .is-static): a wrapped grid. */
.lb-partners.is-static .lb-marquee { -webkit-mask-image: none; mask-image: none; }
.lb-partners.is-static .lb-marquee-track { width: auto; transform: none !important; justify-content: center; }
.lb-partners.is-static .lb-logo-set { flex-wrap: wrap; justify-content: center; gap: 32px 56px; padding: 0 var(--gutter); }
.lb-partners.is-static .lb-logo-set[aria-hidden="true"] { display: none; }

/* ---- Klar til Indien ---- */
/* A card on the white page that runs to the screen edges (Martin, 2026-10-05).
   The two columns hug their content and start from the left, the title near the card's
   edge and the price a fixed gap after it, so the two stay close. */
.lb-ready { background: var(--white); }
.lb-ready.section-y { padding-top: calc(var(--section-y) * 0.7); padding-bottom: calc(var(--section-y) / 2); }   /* tighter to the partners belt and the FAQ (Martin, 2026-10-05) */
.lb-ready-card {
  background: var(--off); border-radius: 50px;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 8vw, 128px);
}
.lb-ready-grid { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: clamp(48px, 16vw, 300px); align-items: end; }
/* Hand-drawn tuk-tuk in the style of Martin's reference (2026-10-05):
   wobbly ink lines over flat, slightly off-register red, a few
   black fills, little action ticks. Static. The copy sits above it, so
   where they overlap the text runs over the drawing. */
.lb-ready-card { position: relative; }
.lb-ready-grid > .reveal { position: relative; z-index: 1; }
.lb-ready-title-col { align-self: start; }   /* the title rides high, level with the price's first line (Martin) */
.lb-ready-art {
  position: absolute; z-index: 0; height: auto;
  pointer-events: none; overflow: visible;
}
.lb-ready-art .ink { fill: none; stroke: var(--navy); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-ready-art .ink-fill { fill: var(--navy); stroke: var(--navy); stroke-width: 3.2; stroke-linejoin: round; }
.lb-ready-art .paper { fill: var(--off); stroke: var(--navy); stroke-width: 3.2; stroke-linejoin: round; }
.lb-ready-art .blob { fill: var(--red); }

/* Tuk-tuk breaks out of the top-right corner; the Taj sits near the
   bottom-left, clear of the card's edges (Martin, 2026-10-05). */
.lb-ready-art--tuktuk { right: clamp(8px, 4vw, 80px); top: clamp(-160px, -10vw, -58px); width: clamp(136px, 19vw, 296px); rotate: -4deg; }
.lb-ready-art--taj { left: clamp(24px, 9vw, 150px); bottom: clamp(14px, 2vw, 36px); width: clamp(100px, 11vw, 170px); rotate: 3deg; }
@media (max-width: 900px) {
  .lb-ready-art--tuktuk { right: 12px; top: -64px; width: 140px; }
  .lb-ready-art--taj { display: none; }
}
.lb-ready-title {
  color: var(--navy);
  padding-bottom: 0.08em;
}
.lb-ready-sub { margin-top: var(--space-3); max-width: 30ch; }
/* An introductory price, never a struck-through "was" price: nothing was ever sold at 54.995 (Martin, 2026-10-21). */
.lb-ready-price { font-size: var(--fs-h3); color: var(--navy); line-height: 1.3; }
.lb-ready-price strong { display: block; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; color: var(--navy); margin-top: 6px; }
.lb-ready-price-note { margin-top: var(--space-2); font-size: var(--fs-body); line-height: 1.5; color: var(--muted); max-width: 34ch; }
.lb-ready-quote { margin: var(--space-3) 0 var(--space-4); font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); font-style: italic; max-width: 28ch; }   /* narrower, so the title (now with "?") keeps one line */

/* ---- FAQ: two independent accordion columns (after zanzibar-hojskolen.dk).
   Closed items are hairline rows; the open one becomes a white card with a
   soft shadow. One open card per column. Height animates via the
   grid-template-rows 0fr -> 1fr technique (the answer has a single child). */
/* Capped at 1200px plus the page gutter. Answer text keeps its own 64ch
   measure inside the card. */
.lb-faq { background: var(--white); --lb-faq-pad: clamp(22px, 1.9vw, 36px); }
.lb-faq.section-y { padding-top: calc(var(--section-y) / 2); padding-bottom: calc(var(--section-y) * 0.6); }   /* tighter to Klar til Indien above and Skriv til os below */
.lb-faq-wrap { max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }   /* capped and set smaller so it reads lighter (Martin, 2026-10-05) */
.lb-faq-head { margin-bottom: var(--space-5); }
.lb-faq-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 96px); align-items: start; }
.lb-faq-item {
  border-bottom: 1px solid var(--border); border-radius: 0; background: transparent;
  box-shadow: 0 0 0 rgba(17, 29, 64, 0), 0 0 0 rgba(17, 29, 64, 0);
  transition: background 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease), padding 320ms var(--ease);
}
.lb-faq-item.is-open {
  background: var(--white); border-radius: var(--radius-btn, 10px); border-bottom-color: transparent;
  box-shadow: 0 2px 4px rgba(17, 29, 64, 0.05), 0 16px 40px rgba(17, 29, 64, 0.11);
  padding-bottom: var(--lb-faq-pad);
}
.lb-faq-q {
  display: flex; align-items: center; gap: 24px; width: 100%;
  padding: clamp(18px, 1.5vw, 26px) var(--lb-faq-pad); background: none; border: 0;
  font: inherit; font-size: clamp(1.15rem, 1.45vw, 1.35rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-align: left;
  color: var(--navy); cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.lb-faq-q:hover, .lb-faq-item.is-open .lb-faq-q { color: var(--red); }
.lb-faq-q:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; border-radius: var(--radius-btn, 10px); }
.lb-faq-text { flex: 1; }
/* Circled + that becomes − when open. Navy at rest, red when open (via currentColor). */
.lb-faq-icon { flex: none; position: relative; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--navy); transition: color var(--dur) var(--ease); }
.lb-faq-q:hover .lb-faq-icon, .lb-faq-item.is-open .lb-faq-icon { color: var(--red); }
.lb-faq-icon::before, .lb-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: currentColor; transition: transform 320ms var(--ease); }
.lb-faq-icon::after { transform: rotate(90deg); }
.lb-faq-item.is-open .lb-faq-icon::after { transform: rotate(0deg); }
.lb-faq-a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 320ms var(--ease), visibility 0s linear 320ms;
}
.lb-faq-item.is-open .lb-faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 320ms var(--ease), visibility 0s; }
.lb-faq-a > p {
  min-height: 0; overflow: hidden;
  padding: 0 var(--lb-faq-pad);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.65; color: var(--body-text);
}
.lb-faq-a > p { box-sizing: border-box; max-width: calc(64ch + 2 * var(--lb-faq-pad)); }
.lb-faq-a a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.lb-faq-a a:hover { color: var(--red); }

/* Below ~760px: one column, Q1–18 in order (the columns simply stack). */
@media (max-width: 760px) {
  .lb-faq { --lb-faq-pad: 18px; }
  .lb-faq-list { grid-template-columns: minmax(0, 1fr); }
  .lb-faq-q { font-size: 18px; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
  .lb-faq-a > p { font-size: 17px; }
}

/* ---- Shared contact form (below every view) ---- */
.lb-contact { background: var(--off); border-radius: 50px 50px 0 0; }   /* rounded top corners on every view (Martin, 2026-10-05) */
.lb-contact.section-y { padding-bottom: calc(var(--section-y) * 0.75); }   /* Send besked a little closer to the footer */
/* The intro column fits its text (no dead band in the middle) and the form
   takes the rest (Martin, 2026-10-05). */
.lb-contact-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.lb-contact-intro .t-lead { margin-top: var(--space-3); max-width: 34ch; font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.lb-contact-links { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 8px; }
.lb-contact-links a { color: var(--navy); font-weight: 400; font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid transparent; align-self: flex-start; transition: border-color var(--dur) var(--ease); }
.lb-contact-links a:hover { border-bottom-color: var(--navy); }
.lb-contact-links .lb-person { font-weight: 700; }

/* Click an address to copy it (WP4 script); a red "Kopieret!" confirms beside
   it, or above it (.is-above) when the right side has no room. Plain red text,
   no pill (Martin, 2026-10-22). */
.lb-contact-links a { position: relative; cursor: copy; }
.lb-copied {
  position: absolute; left: calc(100% + 12px); top: 50%;
  color: var(--red);
  font-size: 0.8rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden;
  transform: translateY(-50%) scale(0.85);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s linear 150ms;
}
.lb-copied::before { content: "\2713\00a0"; }
.lb-copied.is-above { left: 0; top: auto; bottom: calc(100% + 6px); transform: translateY(4px) scale(0.85); transform-origin: left bottom; }
.lb-copied.is-shown { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s; }
.lb-copied.is-above.is-shown { transform: translateY(0) scale(1); }
.lb-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .lb-copied, .lb-copied.is-shown { transition: none; transform: translateY(-50%); }
  .lb-copied.is-above, .lb-copied.is-above.is-shown { transform: none; }
}

/* "Brev" doodle beside "Skriv til os" (WP4 script): a dashed trail loops in
   and a red envelope pops at its end. */
.lb-contact-intro .t-h2 { position: relative; width: fit-content; }
.lb-doodle {
  position: absolute; left: calc(100% + 16px); top: 50%; width: 150px; height: 94px;
  transform: translateY(-50%); overflow: visible; pointer-events: none; color: var(--navy);
}
.lb-doodle .dd-trail { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 6; }
.lb-doodle .dd-reveal { fill: none; stroke: var(--white); stroke-width: 9; }
.lb-doodle .dd-fill { fill: var(--red); }
.lb-doodle .dd-flap { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linejoin: round; }
@media (max-width: 760px) { .lb-doodle { display: none; } }

.lb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--space-3); }
.lb-field { grid-column: span 2; }
.lb-field.is-half { grid-column: span 1; }
.lb-field > label, .lb-legend { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--navy); margin-bottom: 8px; }
/* Floating label: rests on the typing line like a placeholder, then shrinks
   up above it on focus or once there is text (placeholder=" " drives
   :placeholder-shown). A real label, not a placeholder attribute, so it
   follows the DA/EN toggle. */
.lb-field { position: relative; }
.lb-field > label:not(.lb-call-toggle) {
  position: absolute; top: calc(18px + 1.5px); left: calc(18px + 1.5px); z-index: 1; margin: 0;
  font-size: 18px; line-height: 1.4; font-weight: 400; color: #8A8F98; pointer-events: none;
  transform-origin: left top; transition: transform 180ms var(--ease), color 180ms var(--ease);
}
.lb-field:focus-within > label:not(.lb-call-toggle),
.lb-field:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) > label:not(.lb-call-toggle) {
  transform: translateY(-9px) scale(0.72);
}
.lb-field:focus-within > label:not(.lb-call-toggle) { color: var(--navy); }
.lb-field > label .lb-optional { color: inherit; }
.lb-optional { font-weight: 400; color: var(--muted); }
.lb-field input, .lb-field textarea {
  display: block; width: 100%; padding: 26px 18px 10px;
  background: var(--white); border: 1.5px solid #E4E1DA; border-radius: var(--radius-btn, 10px);
  box-shadow: inset 0 1px 3px rgba(17, 29, 64, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  font: inherit; font-size: 18px; line-height: 1.4; font-weight: 400; color: var(--navy); outline: none; -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lb-field textarea { resize: vertical; min-height: 132px; line-height: 1.4; }
.lb-field input:focus, .lb-field textarea:focus { border-color: var(--navy); box-shadow: inset 0 1px 3px rgba(17, 29, 64, 0.05), 0 0 0 3px rgba(17, 29, 64, 0.12); }
.lb-field.is-invalid input, .lb-field.is-invalid textarea { border-color: var(--red); }
.lb-field.is-valid input, .lb-field.is-valid textarea { border-color: #9DB3A4; }
.lb-err { display: none; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--red); }
.lb-field.is-invalid .lb-err { display: block; }

/* "Bestil et opkald" — a square checkbox that reveals day/time choices. */
.lb-field > label.lb-call-toggle { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--navy); }
.lb-form[hidden] { display: none; }
.lb-call-toggle input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; border: 1.5px solid var(--navy); border-radius: 6px; box-shadow: none; background: var(--white); cursor: pointer; display: grid; place-content: center; }
.lb-call-toggle input::after { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--red); transform: scale(0); transition: transform var(--dur) var(--ease); }
.lb-call-toggle input:checked::after { transform: scale(1); }
.lb-call-toggle input:focus { border-color: var(--navy); box-shadow: none; }
.lb-call-toggle input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.lb-call-hint { display: block; margin: 4px 0 0 34px; font-size: var(--fs-small); color: var(--muted); }
/* Opens by animating its row from 0fr to 1fr (as the FAQ does); the negative
   margin cancels the form's row gap while closed. Closed = inert. */
.lb-call-panel {
  grid-column: span 2; display: grid; grid-template-rows: 0fr; margin-top: -20px; opacity: 0;
  transition: grid-template-rows 320ms var(--ease), margin-top 320ms var(--ease), opacity 240ms var(--ease);
}
.lb-call-panel.is-open { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
.lb-call-clip { overflow: hidden; min-height: 0; }
.lb-call-body { display: grid; gap: 20px; padding: 20px 0 4px 32px; border-left: 2px solid var(--navy); margin-left: 10px; }
.lb-call-panel fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-chip { position: relative; }
.lb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lb-chip span.lb-chip-face { display: inline-block; padding: 5px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-btn, 10px); background: var(--white); font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--navy); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lb-chip span.lb-chip-face:hover { border-color: var(--navy); }
.lb-chip input:checked + .lb-chip-face { background: var(--red); border-color: var(--red); color: var(--white); }
.lb-chip input:focus-visible + .lb-chip-face { outline: 2px solid var(--navy); outline-offset: 2px; }

.lb-form-foot { grid-column: span 2; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 4px; }
.lb-success { border-top: 2px solid var(--navy); padding-top: var(--space-4); }
.lb-success[hidden] { display: none; }
.lb-success .t-h3 { color: var(--navy); }
.lb-success p { margin-top: 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--body-text); max-width: 44ch; }
.lb-success button { margin-top: var(--space-3); }

/* Sending to /api/contact (issue #11): day/time errors, the "(valgfrit)"
   tag that drops once a call is booked, the busy button, the form-level
   error, the consent line and the honeypot. */
.lb-call-panel fieldset.is-invalid .lb-err { display: block; }
.lb-call-panel fieldset.is-invalid .lb-chip-face { border-color: var(--red); }
.lb-form.wants-call .lb-optional { display: none; }
.lb-busy { display: none; }
.lb-form.is-sending .lb-idle { display: none; }
.lb-form.is-sending .lb-busy { display: inline; }
.lb-form button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }
.lb-form button[type="submit"]:disabled:hover { background: var(--navy); border-color: var(--navy); }
.lb-form-error { flex: 0 0 100%; font-size: var(--fs-body); line-height: 1.5; font-weight: 700; color: var(--red); }
.lb-form-error[hidden], .lb-form-error > span[hidden] { display: none; }
.lb-consent { flex: 0 0 100%; margin-top: -8px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.lb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ---- */
.lb-footer { background: var(--navy); color: rgba(255,255,255,0.55); padding: var(--space-5) 0; }
.lb-footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
/* The PNG has transparent padding (206 of 568 px on the left); pull it back so the mark sits on the .wrap gutter. */
.lb-footer-logo { height: 24px; width: auto; display: block; margin-left: calc(-24px * 206 / 568); }
.lb-footer-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-small); }
.lb-footer-meta a { color: rgba(255,255,255,0.75); text-decoration: none; white-space: nowrap; }
.lb-footer-meta a:hover { color: var(--white); }
.lb-footer-meta .lb-person { color: var(--white); font-weight: 600; }
.lb-footer .lang-toggle { display: flex; align-items: center; gap: 4px; }
.lb-footer-company { margin-top: var(--space-3); font-size: var(--fs-small); line-height: 1.6; }
.lb-footer-company span, .lb-footer-company a { white-space: nowrap; }
.lb-footer-company a { color: rgba(255,255,255,0.75); text-decoration: none; }
.lb-footer-company a:hover { color: var(--white); }

@media (max-width: 900px) {
  .lb-ready-grid, .lb-contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .lb-ready-grid { justify-content: stretch; }
}
@media (max-width: 640px) {
  .lb-form { grid-template-columns: 1fr; }
  .lb-field, .lb-field.is-half, .lb-call-panel, .lb-form-foot { grid-column: span 1; }
  .lb-logo-set { gap: 48px; padding-right: 48px; }
  .lb-logo img { height: 34px; }
  .lb-logo img.lb-logo-tall { height: 50px; }
  .lb-footer-row { flex-direction: column; align-items: flex-start; }
  .lb-footer-meta { row-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-partners .lb-marquee { -webkit-mask-image: none; mask-image: none; }
  .lb-partners .lb-marquee-track { width: auto; transform: none !important; justify-content: center; }
  .lb-partners .lb-logo-set { flex-wrap: wrap; justify-content: center; gap: 32px 56px; padding: 0 var(--gutter); }
  .lb-partners .lb-logo-set[aria-hidden="true"] { display: none; }
  .lb-faq-item, .lb-faq-a, .lb-faq-item.is-open .lb-faq-a, .lb-faq-q, .lb-faq-icon, .lb-faq-icon::before, .lb-faq-icon::after, .lb-call-toggle input::after, .lb-field > label, .lb-call-panel { transition: none; }
}
/* ==== /SLOT:WP4 ==== */