/* ==========================================================================
   Lens37 client fact sheet: shared template stylesheet
   --------------------------------------------------------------------------
   Layout and structure only, identical for every client. Each client's
   colours, fonts and basic sizes live in brand.css (loaded after this file),
   taken from the client's own website. The values below are only defaults,
   used when a brand.css doesn't set something.
   ========================================================================== */

:root {
  /* ---- Default colours (overridden by brand.css) ---- */
  --paper:         #f5f4ef;   /* page background */
  --sheet:         #ffffff;   /* the "document" panel */
  --ink:           #1a1a1a;   /* main text */
  --ink-soft:      #5b5b5b;   /* secondary text, labels */
  --rule:          #d9d6cc;   /* lines and borders */
  --accent:        #745ED7;   /* links, section numbers */
  --callout:       #f1eefc;   /* background for highlighted boxes */
  --header-bg:     #ffffff;
  --header-ink:    #1a1a1a;
  --header-border: #d9d6cc;
  --footer-bg:     #1a1a1a;
  --footer-ink:    #ffffff;

  /* ---- Default fonts (overridden by brand.css) ---- */
  --font-body:     -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head:     var(--font-body);
  --font-label:    var(--font-body);
  --head-weight:   700;
  --nav-weight:    700;
  --nav-case:      uppercase;

  /* ---- Sizes ---- */
  --text:          1rem;      /* body text */
  --text-small:    0.8125rem; /* labels, meta */
  --h1:            2.25rem;
  --h2:            1.375rem;
  --h3:            1.0625rem;
  --line:          1.6;       /* line height */
  --logo-height:   2.5rem;

  /* ---- Layout ---- */
  --width:         46rem;     /* max width of the document */
  --gap:           1.5rem;    /* standard spacing */
  --radius:        2px;       /* corner rounding (0 = square) */
  --label-col:     13rem;     /* width of the label column in fact lists */
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: var(--line);
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   Site header (logo + navigation), styled like the client's own site header
   ========================================================================== */

.site-header {
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 1px solid var(--header-border);
}

.site-header .inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.site-header a { color: inherit; text-decoration: none; }
.site-logo { display: block; }
.site-logo img { display: block; height: var(--logo-height); width: auto; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-family: var(--font-head);
  font-size: var(--text-small);
  font-weight: var(--nav-weight);
  text-transform: var(--nav-case);
  letter-spacing: 0.04em;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* ==========================================================================
   The document panel
   ========================================================================== */

main {
  max-width: var(--width);
  margin: var(--gap) auto;
  padding: 0 1rem;
}

article {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: calc(var(--gap) * 1.5) clamp(1rem, 4vw, 2.5rem);
  counter-reset: section;
}

/* Breadcrumb */
.breadcrumb ol {
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; }

/* Title block */
.doc-type {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.25; }

h1 { font-size: var(--h1); margin: 0.25rem 0 0.75rem; letter-spacing: -0.01em; }

.lead { font-size: 1.2em; margin: 0 0 var(--gap); }

/* Sections get an automatic number: 01, 02, 03... */
article > section { counter-increment: section; margin-top: calc(var(--gap) * 2); }

h2 {
  font-size: var(--h2);
  margin: 0 0 1rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--ink);
}
h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

h3 { font-size: var(--h3); margin: 1.5rem 0 0.35rem; }

p { margin: 0 0 1rem; }

/* ==========================================================================
   Product photos
   ========================================================================== */

figure { margin: 0 0 var(--gap); }
figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
figure.hero { margin-top: var(--gap); }
figure.hero img { max-height: 32rem; object-fit: contain; }
figcaption {
  font-family: var(--font-label);
  font-size: var(--text-small);
  color: var(--ink-soft);
  padding-top: 0.5rem;
}

/* ==========================================================================
   Fact lists (label on the left, value on the right)
   ========================================================================== */

dl.facts {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  margin: 0;
  border-top: 1px solid var(--rule);
}
dl.facts dt, dl.facts dd {
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
dl.facts dt {
  font-family: var(--font-label);
  font-size: var(--text-small);
  color: var(--ink-soft);
  padding-right: 1rem;
  padding-top: 0.7rem;
}

dl.facts + p { margin-top: 1rem; }

/* Document details (publisher, version, date) under the title */
dl.doc-meta { font-size: 0.95em; }

@media (max-width: 36rem) {
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dt { border-bottom: 0; padding-bottom: 0; }
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
caption {
  text-align: left;
  font-family: var(--font-label);
  font-size: var(--text-small);
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
thead th, tbody th {
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--ink-soft);
}
thead th { border-bottom: 2px solid var(--ink); }

/* ==========================================================================
   Lists, callouts, questions
   ========================================================================== */

ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }

.statement {
  background: var(--callout);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.statement p:last-child { margin-bottom: 0; }

.qa h3 { margin-top: 1.25rem; }

cite { font-style: normal; }

/* ==========================================================================
   Footer (who publishes this page), styled like the client's own footer
   ========================================================================== */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: var(--text-small);
  margin-top: calc(var(--gap) * 2);
}
.site-footer .inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: var(--gap) 1rem;
}
.site-footer a { color: inherit; }
.site-footer p { margin: 0 0 0.5rem; }