/* Typography, until the theme carries a type scale. Colours come from theme.css. */
:root {
  --hom-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hom-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/**
 * Default stylesheet for a published Homly site.
 *
 * Written for what the renderer emits: semantic tags and nothing else. The blog's previous
 * stylesheet targeted `.wrap`, `.marca`, `.entradilla` — classes that only existed in
 * hand-written HTML — so once the CMS published the same content it matched nothing and the
 * page lost its layout entirely.
 *
 * Element selectors only, on purpose. A block that adds a class would have to say so in its
 * declaration, and then this file and the block list could disagree.
 */


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

body {
  margin: 0;
  background: var(--hom-page);
  color: var(--hom-text);
  font: 16px/1.65 var(--hom-font);
  -webkit-text-size-adjust: 100%;
}

/* The renderer wraps every page in one `<main>`, which is the only layout hook there is. */
main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 6rem;
}

h2,
h3,
h4 {
  line-height: 1.25;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.6rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1.05rem;
}

main > :first-child {
  margin-top: 0;
}

p {
  margin: 0 0 1.1rem;
}

a {
  color: var(--hom-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

ul,
ol {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}

li {
  margin: 0.3rem 0;
}

blockquote {
  margin: 1.6rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 3px solid var(--hom-border);
  color: var(--hom-muted);
}

/* Long lines scroll inside the block rather than widening the page on a phone. */
pre {
  margin: 1.4rem 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  background: var(--hom-surface);
  border: 1px solid var(--hom-border);
  border-radius: 6px;
}

pre code {
  font: 13.5px/1.6 var(--hom-mono);
  background: none;
  padding: 0;
}

code {
  font: 0.9em var(--hom-mono);
  background: var(--hom-surface);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--hom-border);
}

section {
  margin: 1.6rem 0;
}

.hom-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.hom-column > :first-child {
  margin-top: 0;
}

header {
  border-bottom: 1px solid var(--hom-border);
}

header > a,
header nav {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}

header img {
  height: 1.6rem;
  width: auto;
  border-radius: 0;
}

header nav a {
  color: var(--hom-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

header nav a:hover {
  color: var(--hom-text);
  text-decoration: underline;
}

main {
  padding-top: 2.5rem;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

/* The classes the blocks declare. A block that emits a class nobody styles renders as a
   plain box: `hom-grid` without these rules is `display: block`, so its children stack and
   the grid the author chose does nothing. */
.hom-grid {
  display: grid;
  gap: 1.5rem;
  margin: 1.6rem 0;
}

.hom-grid-2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.hom-grid-3 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.hom-grid-4 { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

/* Every cell, not only the first: zeroing one column's top margin and not the others
   pushed the first card 26px up and made it 26px taller. */
.hom-grid > * { margin-block-start: 0; }

.hom-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 0.375rem;
  background: var(--hom-brand);
  color: var(--hom-page);
  /* A page-coloured outline, because a hero painted `brand` swallows a `brand` button whole.
     CSS cannot ask what colour it is sitting on, so the button carries its own edge: visible
     against the brand, invisible against the page, correct on both. */
  border: 2px solid var(--hom-page);
  text-decoration: none;
  /* 44px tall at this padding and line height: a tap target people aim at. */
  min-block-size: 44px;
  line-height: 1.9;
}

.hom-embed {
  display: block;
  padding: 1rem;
  border: 1px solid var(--hom-border);
  border-radius: 0.5rem;
  text-decoration: none;
}

.hom-embed > :last-child {
  display: block;
  color: var(--hom-muted);
  font-size: 0.875rem;
}


/* The elements the table, accordion and figure patterns rest on. Without these they render
   at browser defaults: a table 330px wide with 1px cell padding, and an accordion that is
   two bare triangles. */
table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
}

caption {
  text-align: start;
  color: var(--hom-muted);
  font-size: 0.875rem;
  padding-block-end: 0.5rem;
}

th, td {
  padding: 0.6rem 0.75rem;
  border-block-end: 1px solid var(--hom-border);
  text-align: start;
}

th { font-weight: 600; }

details {
  border-block-end: 1px solid var(--hom-border);
  padding-block: 0.75rem;
}

summary {
  cursor: pointer;
  font-weight: 600;
  /* 24px minimum target, and the marker stays visible. */
  min-block-size: 24px;
}

figure { margin: 1.5rem 0; }
figure img { max-inline-size: 100%; block-size: auto; }

figcaption {
  color: var(--hom-muted);
  font-size: 0.875rem;
  padding-block-start: 0.5rem;
}