/* ============================================================
   BDA website · additions the prototype does not carry.
   Nothing here restyles a prototype element: it only styles the
   parts production needs (skip link, cookie notice, legal and 404
   documents, language blocks, print). Every value comes from the
   tokens in styles.css, so both themes work with no extra work.
   ============================================================ */

/* ---------- Skip link (first focusable element on the page) ---------- */
.skip-link {
  position: fixed;
  top: 10px;
  left: -300px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: left 0.2s var(--ease);
}
.skip-link:focus-visible,
.skip-link:focus {
  left: 10px;
}

/* ---------- One language at a time, switched by <html lang> ---------- */
[data-lang-block="en"] { display: none; }
html[lang="en"] [data-lang-block="en"] { display: block; }
html[lang="en"] [data-lang-block="ro"] { display: none; }

/* ---------- Documents: legal pages and the 404 ---------- */
html[data-doc] { scroll-snap-type: none !important; }
html[data-doc] body { overflow-x: hidden; }
.doc { padding: clamp(28px, 6vh, 64px) 0 clamp(48px, 9vh, 96px); }
/* A legal document is one column of text: centred in the page, at a width that can be read. */
.doc-inner { max-width: 74ch; margin-inline: auto; }
.doc h1 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 10px; }
.doc .doc-meta { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.doc .doc-intro { font-size: clamp(16px, 1.1vw, 18px); color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
.doc h2 { font-size: clamp(19px, 1.7vw, 23px); margin: 34px 0 10px; letter-spacing: -0.014em; }
.doc p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.62; }
.doc ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); line-height: 1.62; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--hair-2); }
.doc a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.doc-note {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--signal);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
}
.doc-table-wrap { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.doc table { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-2); line-height: 1.5; }
.doc th { background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 13.5px; }
.doc tr:last-child td { border-bottom: 0; }
.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.doc-toc a { display: inline-block; padding: 6px 12px; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.doc-toc a:hover { border-color: var(--ink); color: var(--ink); }
.doc-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--muted); }

/* ---------- Analytics opt-out switch (cookie policy page) ---------- */
.optout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.optout p { margin: 0; font-size: 14px; }
.optout button { border: 1px solid var(--hair-2); background: var(--ground); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.optout button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.optout .optout-state { font-size: 13px; color: var(--muted); }

/* ---------- 404 ---------- */
.nf { min-height: calc(100dvh - var(--nav-h) - 220px); display: grid; align-content: center; padding: clamp(40px, 10vh, 110px) 0; }
.nf-code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.nf h1 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 12px; }
.nf p { color: var(--ink-2); max-width: 54ch; margin-bottom: 22px; font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.55; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 47;
  width: min(400px, calc(100vw - 36px));
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
}
.cookie-notice p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cookie-notice .cookie-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cookie-notice button {
  border: 0;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.cookie-notice a { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cookie-notice.is-open ~ .dock { bottom: 150px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-notice { animation: cookie-in 0.45s var(--ease) both; }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- Instant demo: dormant until the product link is configured ----------
   render.ts sets <html data-demo="live"> only while PRODUCT_BASE_URL and PRODUCT_INTAKE_SECRET are set. Until
   then nothing on the site leads to /vezi-asistentul (it stays reachable by its address), and app.js reads the
   manual texts of the lines whose promise differs (data-i18n-live). */
html:not([data-demo="live"]) .demo-entry { display: none; }

/* ---------- "Funcționează cu ce folosești deja": a chip per connection, each once it works for a client ----------
   render.ts copies SITE_CONNECTORS into <html data-connectors="calendar notebook">. Nothing listed hides the strip;
   "Excel în OneDrive sau Google Drive" names only the doors that are open, and "sau pe WhatsApp" appears only once
   a client's own number is live. The prototype shows everything: it is the design. */
html:not([data-connectors]) .works-with { display: none; }
html:not([data-connectors~="sheets"]) .works-with [data-c="sheets"],
html:not([data-connectors~="calendar"]) .works-with [data-c="calendar"],
html:not([data-connectors~="myrentals"]) .works-with [data-c="myrentals"],
html:not([data-connectors~="notebook"]) .works-with [data-c="notebook"],
html:not([data-connectors~="whatsapp"]) .works-with [data-c="whatsapp"],
html:not([data-connectors~="onedrive"]) .works-with [data-c="onedrive"],
html:not([data-connectors~="drive"]) .works-with [data-c="drive"],
html:not([data-connectors~="onedrive"]) .works-with [data-c="excel-or"],
html:not([data-connectors~="drive"]) .works-with [data-c="excel-or"],
html:not([data-connectors~="onedrive"]):not([data-connectors~="drive"]) .works-with [data-c="excel"] { display: none; }

/* ---------- Print ---------- */
@media print {
  .nav, .nav-sheet, .dock, .chatbox, .cookie-notice, .skip-link, .footer .footer-grid { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .doc a { color: #000; }
  .doc table { border-color: #999; }
  .doc { padding-top: 0; }
}