/*
 * presskit.live's own stylesheet: the tokens, and the legal-page treatment.
 *
 * The header, footer, 404 and home are Elementor templates (templates/*.json,
 * placed by `wp presskit-site seed`), and almost everything about them is set
 * on the elements themselves, where the editor can change it. What lives here
 * instead is what Elementor's controls cannot reach: the type and spacing
 * inside a text widget's HTML on the two legal pages, and a handful of custom
 * properties the templates and the widgets share.
 *
 * Colour: paper, a hair warm, and the mark's tile colour as the ink. The
 * spectrum appears in the mark and nowhere else.
 */
:root {
  --pk-site-paper: #fbfbf9;
  --pk-site-ink: #1d1d1b;
  --pk-site-ink-2: #6b6b66;
  --pk-site-rule: #e4e4df;
  --pk-site-well: #f1f1ec;
  --pk-site-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pk-site-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
 * The footer stands at the foot of the window on a short page — the home, the
 * 404 — and the content takes the room between (the owner, 2026-10-19). The
 * body is a column at least the window tall and the footer is pushed down by
 * its own margin, so this needs no knowledge of what the theme or Elementor
 * wraps the content in. Not in the editor's preview, whose body is Elementor's
 * to lay out.
 */
body:not(.elementor-editor-active) {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:not(.elementor-editor-active) > .elementor-location-footer {
  margin-top: auto;
}

/* On the two short pages — the home and the 404 — the content takes the whole
   room between header and footer and sits in the middle of it (the owner,
   2026-10-19). A long page is unaffected: there is no room to share. */
body:not(.elementor-editor-active).home > .elementor[data-elementor-type='wp-page'],
body:not(.elementor-editor-active).error404 > .elementor[data-elementor-type='error-404'] {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The home's one line under the slogan, and any other lede the editor marks. */
.pk-lede {
  max-width: 34em;
}

/*
 * Legal pages (`body.pk-legal`, from `_presskit_site_layout = legal`): the
 * Privacy Policy and the Terms are one text widget each. A measure of 68
 * characters, Plex Sans at 17px, the title and the "Last updated" line in the
 * mono, section headings a step up, and the copy's code spans drawn as code.
 *
 * The widget rule names `.elementor .elementor-element` as well, to stand above
 * Elementor's per-element CSS (`.elementor-40 .elementor-element.elementor-
 * element-xxxx`, three classes), which otherwise wins on specificity whatever
 * the page carries. The body rule is the belt for a page whose settings still
 * carry Elementor 4's page padding — which lands on the body — until the seed
 * has dropped it.
 */
body.pk-legal.elementor-page {
  padding: 0;
}

/* The copy's own container is an Editor V4 flexbox with 10px of padding of its
   own; without it the copy starts where the header's mark does. */
body.pk-legal .elementor[data-elementor-type='wp-page'] > .e-con {
  padding-inline: 0;
}

body.pk-legal .elementor .elementor-element.elementor-widget-text-editor {
  max-width: 68ch;
  font-family: var(--pk-site-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--pk-site-ink);
}

/* The page's own wrapper (`div.elementor.elementor-<id>`, typed wp-page — the
   `elementor-page` class is the body's, not the wrapper's): the measure sits
   inside the site's gutter and width, boxed as the header and footer are. */
body.pk-legal .elementor[data-elementor-type='wp-page'] {
  /* The header's and footer's 1080px box excludes their 16px gutter, so this
     box is 1080px plus the two gutters: the copy's left edge is the mark's. */
  max-width: calc(1080px + 2 * 16px);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  width: 100%;
  box-sizing: border-box;
}

body.pk-legal .elementor-widget-text-editor h1 {
  font-family: var(--pk-site-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}

/* "Last updated 11 October 2026." — the paragraph right after the title. */
body.pk-legal .elementor-widget-text-editor h1 + p {
  font-family: var(--pk-site-mono);
  font-size: 0.86rem;
  color: var(--pk-site-ink-2);
  margin: 0 0 2.2rem;
}

body.pk-legal .elementor-widget-text-editor h1 + p em {
  font-style: normal;
}

body.pk-legal .elementor-widget-text-editor h2 {
  font-family: var(--pk-site-sans);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.2rem 0 0.6rem;
}

/* The copy wraps every h2's text in <strong>; the heading's weight is the heading's. */
body.pk-legal .elementor-widget-text-editor h2 strong {
  font-weight: inherit;
}

body.pk-legal .elementor-widget-text-editor h3 {
  font-family: var(--pk-site-sans);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 1.6rem 0 0.4rem;
}

body.pk-legal .elementor-widget-text-editor p {
  margin: 0 0 0.9rem;
}

body.pk-legal .elementor-widget-text-editor ul,
body.pk-legal .elementor-widget-text-editor ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

body.pk-legal .elementor-widget-text-editor li {
  margin: 0 0 0.5rem;
}

body.pk-legal .elementor-widget-text-editor code {
  font-family: var(--pk-site-mono);
  font-size: 0.9em;
  background: var(--pk-site-well);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

body.pk-legal .elementor-widget-text-editor a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

body.pk-legal .elementor-widget-text-editor a:hover {
  color: var(--pk-site-ink-2);
}

body.pk-legal .elementor-widget-text-editor a:focus-visible {
  outline: 2px solid var(--pk-site-ink);
  outline-offset: 2px;
  border-radius: 2px;
}