/* ==========================================================================
   KOBIL — Legal pages (Privacy Policy · Imprint & Disclaimer ·
   Responsible Disclosure), shared section: content

   1:1 port of the live legal pages (dev branch, the three
   src/app/(app)/legal/<slug>/page.tsx). All values below are the desktop
   (1440px) values of the dev design tokens — there `--w{n}` resolves to
   exactly `n` px at a 1440 viewport, so e.g. `md:gap-w40` = 40px,
   `md:px-w40` = 40px, `md:text-w32` = 32px. The ≤768px block at the
   bottom mirrors the dev `m{n}` scale at 375px in the same way.

   Typography follows dev: headings Instrument Sans 700 (--font-sans),
   body copy Inter (--font-ui). Note Inter is self-hosted at 400/500/600
   only, so `font-weight: 700` on body copy resolves to the 600 face —
   intentional, matching the closest available cut.
   ========================================================================== */

.sec-legal-content {
  /* Dev colors that have no equivalent in tokens.css yet: system-70 there
     is #4d586e (tokens.css --navy-70 is #586680), system-50 is #d5d9e3. */
  --legal-link: #4d586e;
  --legal-rule-strong: #d5d9e3;
  --legal-cyan: #3ebffc;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 50px 40px 72px;
  background: var(--white);
  border-radius: 18px;
}

/* Beveled bottom-right corner — dev renders this with the shared
   <ClipPath id="edge-folding" className="md:w-w100"> overlay (a 100×100
   square clipped to the fold path). Here it's cut out of the card itself,
   same as the FAQs card, so it stays independent of the page background.
   Responsible Disclosure has no ClipPath on the live page — hence the
   modifier rather than a base style. */
.sec-legal-content--bevel {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 100px),
    calc(100% - 8px) calc(100% - 83px),
    calc(100% - 83px) calc(100% - 8px),
    calc(100% - 100px) 100%,
    0 100%
  );
}

/* ---- Headings ------------------------------------------------------- */

/* text-w32: 32px/1.5 */
.sec-legal-content__title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}

/* text-w24: 24px/1.33 */
.sec-legal-content__heading {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--navy);
}

/* Title + hairline underneath (Responsible Disclosure) */
.sec-legal-content__title-block > .sec-legal-content__rule {
  margin-top: 24px;
}

/* ---- Blocks (h2 + copy), gap-w24 ------------------------------------ */

.sec-legal-content__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Intro paragraph + bullet list, dev spacer <div class="h-w8"> */
.sec-legal-content__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Groups separated by an empty text line in dev (<br> at 16/1.5 = 24px) */
.sec-legal-content__group--loose {
  gap: 24px;
}

/* List with its own bold caption line, gap-w4 */
.sec-legal-content__group--tight {
  gap: 4px;
}

/* Trailing note after a list — dev inserts an extra <div class="h-w8">
   on top of the surrounding 8px gap. */
.sec-legal-content__note {
  margin-top: 8px;
}

/* Contact / company-detail blocks (Imprint), gap-w4 */
.sec-legal-content__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Body copy: text-w16 = 16px/1.5 --------------------------------- */

.sec-legal-content__text {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy-80);
}

.sec-legal-content__label {
  font-weight: 600;
}

/* leading-relaxed = 1.625 (address blocks) */
.sec-legal-content__text--relaxed {
  line-height: 1.625;
}

.sec-legal-content__contact-name {
  font-weight: 700;
}

/* ---- Links ----------------------------------------------------------- */

.sec-legal-content__link {
  font-weight: 700;
  color: var(--legal-link);
  transition: opacity var(--dur) var(--ease);
}

.sec-legal-content__link:hover {
  opacity: 0.8;
}

/* Standalone accent links (security@kobil.com, security.txt) */
.sec-legal-content__link--accent {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue);
}

/* ---- Hairlines -------------------------------------------------------- */

.sec-legal-content__rule {
  height: 1px;
  background: var(--navy-40);
}

.sec-legal-content__rule--strong {
  background: var(--legal-rule-strong);
}

/* ---- Bullet list (Privacy Policy): 6px navy dot ----------------------- */

.sec-legal-content__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sec-legal-content__list-item {
  display: flex;
}

.sec-legal-content__list-item::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 9px 8px 0;
  border-radius: 50%;
  background: var(--navy-80);
}

/* ---- Checklist (Responsible Disclosure): 12px cyan dot ---------------- */

.sec-legal-content__checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec-legal-content__checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-legal-content__checklist-item::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 6px;
  border-radius: 50%;
  background: var(--legal-cyan);
}

.sec-legal-content__checklist-item .sec-legal-content__text {
  color: var(--navy);
}

/* ---- Mobile (dev `m` scale at 375px) --------------------------------- */

@media (max-width: 768px) {
  .sec-legal-content {
    gap: 32px;
    padding: 32px 16px 56px;
  }

  .sec-legal-content--bevel {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 68px),
      calc(100% - 8px) calc(100% - 49px),
      calc(100% - 51px) calc(100% - 7px),
      calc(100% - 70px) 100%,
      0 100%
    );
  }

  /* text-m24 (no line-height override in dev → 1.5) */
  .sec-legal-content__title {
    font-size: 24px;
  }

  /* text-m18: 18px/1.44 */
  .sec-legal-content__heading {
    font-size: 18px;
    line-height: 1.44;
  }

  .sec-legal-content__title-block > .sec-legal-content__rule {
    margin-top: 24px;
  }

  .sec-legal-content__block {
    gap: 16px;
  }

  /* text-m14: 14px/1.57 */
  .sec-legal-content__text,
  .sec-legal-content__link--accent {
    font-size: 14px;
    line-height: 1.57;
  }

  .sec-legal-content__group--loose {
    gap: 22px;
  }

  .sec-legal-content__list-item::before {
    width: 4px;
    height: 4px;
    margin: 9px 6px 0;
  }

  .sec-legal-content__checklist {
    gap: 8px;
  }

  .sec-legal-content__checklist-item::before {
    margin: 5px;
  }
}