/* ==========================================================================
   WooGrub — client/css/legal.css   (Legal / policy pages)
   CLIENT LAYER (deploy-excluded). Auto-loaded by the legal template via
   client.php's CSS gating; deps locked to [wg-base, wg-layout].

   PURE PROSE STYLING — no fonts, no colours-as-branding, no layout overrides.
   The template is a thin shell around the_content(); this file styles the
   rhythm and hierarchy of editor-authored blocks (H2 sections, paragraph
   clauses) to match the Glasgatan "Allmänna Villkor" reference.

   Reading column: inherited from .wg-main (layout.css → max-width 720px,
   centred, padded). legal.css does NOT add .wg-front-page, so it keeps that
   default — no full-bleed. Paragraph reading width is the base p { max-width:
   70ch } cap, which sits comfortably inside the 720px column.

   Font: theme default (Inter) by design — legal text reads better in a normal
   body face than the condensed Oswald the homepage uses. Nothing here touches
   --wg-font-*.

   Numbering ("1.", "1.1 …") is TYPED TEXT in the content, never generated.
   No counter-increment — these rules style spacing/hierarchy only, so they
   survive client reordering and match the pasted source verbatim.
   ========================================================================== */

/* ── Column width — centred reading column ─────────────────────────────────
   Legal docs read best as a contained measure centred on the page. .wg-main's
   margin-inline:auto centres the column; we size the column to the text and
   lift the base paragraph cap inside it (below) so text FILLS the column —
   container width is then the single source of truth, and centred container =
   centred text, equal margins both sides.

   ~52rem gives a roomier ~80-char measure (vs the base 70ch) so the text
   breathes rather than feeling squished — closer to typical policy-page width.
   Adjust this one value to taste: ~48rem tighter, ~56rem wider. */
.wg-legal.wg-main {
  max-width: 52rem;
  /* The theme's <body> is display:grid; grid/flex children have an implicit
     min-width:auto that refuses to shrink below their content's intrinsic
     width. A wide table (min-width:32rem) would therefore inflate the grid
     row → widen the whole page (header included) on mobile. min-width:0 lets
     this column shrink to the viewport, so the table's overflow resolves
     INSIDE its own figure (overflow-x:auto) instead of pushing the page wide. */
  min-width: 0;
}

/* ── Document wrapper ──────────────────────────────────────────────────────
   The article is a plain flow container inside the column; it owns vertical
   rhythm only. Width/centring come from .wg-legal.wg-main above. */
.wg-legal__doc {
  /* flow container — no width rules here */
}

/* ── Title + underline rule (reference: H1 with a bottom border) ──────────── */
.wg-legal__title {
  margin-bottom: var(--wg-space-5);
  padding-bottom: var(--wg-space-4);
  border-bottom: 1px solid var(--wg-border);
  /* h1 sizing/weight/colour inherited from base.css */
}

/* ── Body prose ────────────────────────────────────────────────────────────
   the_content() output lives here: H2 section headings + paragraph clauses. */

/* Section headings (numbered: "1. Allmän information").
   Generous top margin separates each numbered block; tighter bottom margin
   binds the heading to its first clause. :first-child guard stops the intro
   heading (e.g. "Tillämplighet") gaining a big gap right under the title. */
.wg-legal__body h2 {
  margin-top: var(--wg-space-12);
  margin-bottom: var(--wg-space-4);
  /* h2 sizing/weight/colour inherited from base.css */
}

.wg-legal__body > h2:first-child {
  margin-top: var(--wg-space-6);
}

/* Defensive: H3 (rare — deeper nesting if a client uses it) */
.wg-legal__body h3 {
  margin-top: var(--wg-space-8);
  margin-bottom: var(--wg-space-3);
}

/* H4 — sub-labels within a section (e.g. cookie policy's "Data som lagras:",
   "Syfte:", "Överförs information till en tredjepart?"). Tighter rhythm than
   H3; sits close to the paragraph it introduces. */
.wg-legal__body h4 {
  margin-top: var(--wg-space-6);
  margin-bottom: var(--wg-space-2);
  font-size: 1.0625rem;
}

/* Clause paragraphs (1.1, 1.2 …): each is its own <p>, spacing only.
   line-height tuned for long-form reading.
   max-width:100% lifts the base p { max-width: 70ch } cap WITHIN legal, so
   paragraphs fill the centred column (above) instead of stopping at 70ch and
   pooling space on the right. The column width is now the single source of
   truth for the reading measure. */
.wg-legal__body p {
  max-width: 100%;
  margin-bottom: var(--wg-space-4);
  line-height: 1.7;
  color: var(--wg-text);
}

.wg-legal__body p:last-child {
  margin-bottom: 0;
}

/* Lists, if a client uses bullets/numbers in a clause.
   base.css strips list-style globally (list-style: none) — re-assert it here
   so genuine legal lists render with markers, indented into the column. */
.wg-legal__body ul,
.wg-legal__body ol {
  margin: 0 0 var(--wg-space-4) var(--wg-space-6);
  line-height: 1.7;
}

.wg-legal__body ul { list-style: disc; }
.wg-legal__body ol { list-style: decimal; }

.wg-legal__body li {
  margin-bottom: var(--wg-space-2);
}

/* ── Tables (e.g. cookie policy: name / purpose / duration / category) ───────
   Gutenberg emits <figure class="wp-block-table"><table>…. We style for the
   clean reference look: full-width within the column, header row set apart,
   horizontal row dividers, comfortable cell padding.

   Scroll containment: the FIGURE scrolls horizontally (overflow-x:auto), never
   the page. max-width:100% + min-width:0 pin the figure to the column width so
   a wide table (min-width:32rem) overflows INSIDE the figure on narrow screens
   instead of pushing the whole page wider. display:block guards against the
   figure ever being treated as a wider intrinsic-width box. */
.wg-legal__body .wp-block-table {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: var(--wg-space-6) 0;
  overflow-x: auto;          /* horizontal scroll lives on the figure only */
  -webkit-overflow-scrolling: touch;
}

.wg-legal__body .wp-block-table table {
  width: 100%;
  min-width: 32rem;          /* keep columns legible; scroll below this */
  border-collapse: collapse;
  border: 1px solid var(--wg-border);   /* uniform outer frame (overrides WP core default) */
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Header row — subtle fill + heavier weight, like the reference. */
.wg-legal__body .wp-block-table th {
  text-align: left;
  font-weight: 600;
  color: var(--wg-text);
  background: var(--wg-bg);
  padding: var(--wg-space-3) var(--wg-space-4);
  border: none;                                  /* reset WP core cell borders */
  border-bottom: 2px solid var(--wg-border-strong);
}

/* Body cells — horizontal dividers only (no vertical grid), airy padding. */
.wg-legal__body .wp-block-table td {
  padding: var(--wg-space-3) var(--wg-space-4);
  border: none;                                  /* reset WP core cell borders */
  border-bottom: 1px solid var(--wg-border);
  vertical-align: top;
  color: var(--wg-text);
}

/* First column (cookie names) reads as identifiers — slight emphasis. */
.wg-legal__body .wp-block-table td:first-child {
  font-weight: 500;
  white-space: nowrap;
}

/* Inline links (email, integritetspolicy, etc.).
   base.css colours links --wg-primary and flips to --wg-accent on hover; in
   long-form prose an underline aids scannability and accessibility, so add one
   here. Re-assert hover colour so the base a:hover rule doesn't surprise us. */
.wg-legal__body a {
  color: var(--wg-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wg-legal__body a:hover {
  color: var(--wg-accent);
}

/* "Publicerad: …" trailing line + any closing meta — softer, set apart.
   Optional: clients can wrap a trailing note; left as a plain paragraph by
   default. No rule needed unless a muted treatment is wanted later. */