/* Kezvion — content typography for pages, policies and blog posts.
   Loaded only on page / article / policy templates (snippets/stylesheets.liquid).
   Scope wrappers: .page-content block or .pg / .gd (pages), .shopify-policy__body (policies), .blog-post-content (articles).
   Design: document-like reading column, hairlines instead of boxes, navy ink from the logo,
   spec-sheet tables (the content that decides a purchase). */

/* Colour and radius tokens (--kz-ink, --kz-line, ...) are defined in kezvion-store.css. */
:root {
  --kz-column: 42rem;
}

/* ---------- 1. Reading column ---------- */

/* Page template: title block + content block share one centred column */
.section-content-wrapper:has(.page-content, .pg, .gd) {
  max-width: var(--kz-column);
  margin-inline: auto;
}

/* Policies are rendered by Shopify inside the layout: give them the same column */
.shopify-policy__container {
  max-width: var(--kz-column);
  margin-inline: auto;
  padding-inline: var(--page-margin, 1rem);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5rem);
}

.shopify-policy__title {
  margin-block-end: 1.75rem;
}

.shopify-policy__title h1 {
  font-size: var(--font-h2--size, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kz-ink);
  margin: 0;
}

/* ---------- 2. Typography inside the column ---------- */

.page-content,
.rte :is(.pg, .gd),
.shopify-policy__body,
.blog-post-content {
  color: var(--kz-text);
  line-height: 1.7;

  & p {
    margin-block: 0 1.05em;
  }

  & .lede {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--kz-ink);
    margin-block-end: 1.6em;
  }

  & b,
  & strong {
    font-weight: 700;
    color: var(--kz-ink);
  }

  & h4 {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--kz-ink);
    margin-block: 1.5em 0.35em;
  }

  & :is(p, li, td, th, span) a:not(.cta) {
    color: var(--kz-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--kz-line-strong);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.15s ease;
  }

  & :is(p, li, td, th, span) a:not(.cta):hover {
    color: var(--kz-ink);
    text-decoration-color: currentcolor;
  }

  & ul,
  & ol {
    padding-inline-start: 1.35em;
    margin-block: 0 1.15em;
  }

  & li {
    margin-block-end: 0.45em;
  }

  & li::marker {
    color: var(--kz-muted);
  }

  & li > :is(ul, ol) {
    margin-block-start: 0.45em;
  }

  & figcaption {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kz-muted);
    margin-block: 0 1.7em;
  }

  /* ---------- 3. Spec-sheet tables ---------- */

  & .tw,
  & .rte-table-wrapper {
    overflow-x: auto;
    margin-block: 1.1em 1.6em;
  }

  & .tw .rte-table-wrapper {
    margin: 0;
  }

  & table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }

  & thead,
  & tr:not(:has(td)) {
    background: none;
    text-transform: none;
    font-weight: 500;
  }

  & tr:has(td) {
    border-block-end: 0;
  }

  & th,
  & td {
    text-align: start;
    vertical-align: top;
    padding: 0.7rem 0.9rem;
    border-block-end: 1px solid var(--kz-line);
  }

  & :is(th, td):first-child {
    padding-inline-start: 0;
  }

  & :is(th, td):last-child {
    padding-inline-end: 0;
  }

  & thead th {
    color: var(--kz-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: bottom;
    padding-block: 0.5rem 0.6rem;
    border-block-end: 2px solid var(--kz-ink);
    white-space: nowrap;
  }

  & tbody th {
    color: var(--kz-ink);
    font-weight: 500;
    width: 30%;
  }

  /* ---------- 4. Accordions (details / summary) ---------- */

  & details {
    margin: 0;
    background: none;
    border: 0;
    border-block-start: 1px solid var(--kz-line);
    border-radius: 0;
  }

  & details:has(+ :not(details)),
  & details:last-child {
    border-block-end: 1px solid var(--kz-line);
  }

  & summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    padding-block: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--kz-ink);
  }

  & summary::-webkit-details-marker {
    display: none;
  }

  & summary::after {
    content: '';
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    margin-block-start: 0.45em;
    margin-inline-end: 0.2rem;
    border-inline-end: 1.5px solid currentcolor;
    border-block-end: 1.5px solid currentcolor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  & details[open] > summary::after {
    transform: rotate(225deg);
    margin-block-start: 0.7em;
  }

  & summary:hover {
    color: var(--kz-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--kz-line-strong);
    text-underline-offset: 0.18em;
  }

  & .ac {
    padding: 0 2.25rem 1.15rem 0;
  }

  & .ac > :first-child {
    margin-block-start: 0;
  }

  & .ac > :last-child {
    margin-block-end: 0;
  }

  /* ---------- 5. Callouts ---------- */

  & .k,
  & .warn {
    padding: 1rem 1.2rem;
    margin-block: 1.6em;
    border-radius: 0 var(--kz-radius) var(--kz-radius) 0;
  }

  & .k {
    background: var(--kz-surface);
    border-inline-start: 3px solid var(--kz-ink);
  }

  & .warn {
    background: var(--kz-signal-soft);
    border-inline-start: 3px solid var(--kz-signal);
  }

  & :is(.k, .warn) > :last-child {
    margin-block-end: 0;
  }

  /* Policy identity block ("Trading name: … KVK …") */
  & .kv {
    background: var(--kz-surface);
    border-radius: var(--kz-radius);
    padding: 1rem 1.2rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    margin-block: 0 1.4em;
  }

  /* ---------- 6. Call to action (matches theme secondary button) ---------- */

  & .cta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    margin-block: 2em 0;
    padding: 1rem 1.3rem;
    border: 1.5px solid var(--kz-ink);
    border-radius: var(--kz-radius-pill);
    background: transparent;
    color: var(--kz-ink);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  & .cta + .cta {
    margin-block-start: 0.75rem;
  }

  & .cta span {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--kz-muted);
    transition: color 0.15s ease;
  }

  & .cta:hover,
  & .cta:focus-visible {
    background: var(--kz-ink);
    color: #fff;
  }

  & .cta:hover span,
  & .cta:focus-visible span {
    color: rgb(255 255 255 / 0.78);
  }

  /* ---------- 7. Guide furniture: contents, section links, steps ---------- */

  & .toc {
    background: var(--kz-surface);
    border-radius: var(--kz-radius);
    padding: 1.25rem 1.5rem;
    margin-block: 1.8em 2.2em;
  }

  & .toc b {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kz-ink);
    margin-block-end: 0.6rem;
  }

  & .toc ol {
    columns: 2;
    column-gap: 2rem;
    margin: 0;
    padding-inline-start: 1.3em;
    font-size: 0.9375rem;
  }

  & .toc li {
    break-inside: avoid;
    margin-block-end: 0.35em;
  }

  & .nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin-block: 1.6em;
  }

  & .nav a {
    display: block;
    padding: 0.9rem 1rem;
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
  }

  & .nav a:hover {
    border-color: var(--kz-ink);
  }

  & .nav b {
    display: block;
    color: var(--kz-ink);
    margin-block-end: 0.15rem;
  }

  & .nav span {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--kz-muted);
  }

  & .step {
    list-style: none;
    padding: 0;
    margin-block: 1.4em 1.8em;
    counter-reset: kz-step;
  }

  & .step > li {
    counter-increment: kz-step;
    position: relative;
    padding-inline-start: 3rem;
    margin-block-end: 1.1em;
  }

  & .step > li::before {
    content: counter(kz-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0.05em;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--kz-ink);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
  }

  & .step b {
    color: var(--kz-ink);
  }

  /* Two-column fact list (About, Contact) */
  & .grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    column-gap: 2rem;
    border-block-start: 2px solid var(--kz-ink);
    margin-block: 1.4em 1.8em;
  }

  & .grid2 > div {
    padding-block: 0.9rem;
    border-block-end: 1px solid var(--kz-line);
  }

  & .grid2 b {
    display: block;
    color: var(--kz-ink);
    margin-block-end: 0.15rem;
  }

  & .grid2 span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--kz-muted);
  }

  /* Contact page: the two ways to reach us read as the main content */
  & .contact .grid2 span a {
    font-size: 1.125rem;
    font-weight: 500;
  }
}

/* ---------- Headings: section heads sit on a hairline rule, like a manual ---------- */

/* Pages use h2 (FAQ groups use p.sec); policies are written with h3 as their top level */
.page-content h2,
.rte :is(.pg, .gd) :is(h2, .sec),
.shopify-policy__body :is(h2, h3),
.blog-post-content h2 {
  font-family: var(--font-heading--family, inherit);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--kz-ink);
  margin-block: 2.4em 0.6em;
  padding-block-start: 0.85em;
  border-block-start: 1px solid var(--kz-line);
}

/* No double rule when a heading follows an accordion list that already closes with one */
:is(.page-content, .rte :is(.pg, .gd)) details + :is(h2, .sec) {
  border-block-start: 0;
  padding-block-start: 0;
}

.page-content h3,
.rte :is(.pg, .gd) h3,
.shopify-policy__body h4,
.blog-post-content h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--kz-ink);
  margin-block: 1.9em 0.45em;
}

/* ---------- 8. Images: diagrams in guides get a hairline frame, blog photos do not ---------- */

:is(.page-content, .rte :is(.pg, .gd)) img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-radius);
  margin-block: 1.4em 0.6em;
}

.blog-post-content img {
  border-radius: var(--kz-radius);
}

/* ---------- 9. Small screens ---------- */

@media screen and (max-width: 40em) {
  .page-content,
  .rte :is(.pg, .gd),
  .shopify-policy__body,
  .blog-post-content {
    & th,
    & td {
      padding: 0.6rem 0.6rem;
    }

    /* Tables with three or more columns scroll sideways instead of squeezing every cell */
    & table:has(tr > :nth-child(3)) :is(th, td) {
      min-width: 8.5rem;
    }

    & .toc ol {
      columns: 1;
    }

    & .ac {
      padding-inline-end: 0;
    }

    & .toc,
    & .k,
    & .warn,
    & .kv {
      padding: 0.9rem 1rem;
    }
  }
}

/* ---------- 10. Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-content,
  .rte :is(.pg, .gd),
  .shopify-policy__body,
  .blog-post-content {
    & summary::after,
    & .cta,
    & .cta span,
    & .nav a,
    & a {
      transition: none;
    }
  }
}