/* MKOY public sites.
 *
 * Layered on mkoy-tokens.css and mkoy-base.css, which are COPIES of
 * styles/mikkokoivunalho/web/ and must not be edited here. mkoy-ui.css is
 * deliberately absent: that is application chrome, and a brochure that looks
 * like an admin tool is a brochure nobody reads.
 *
 * Restraint, not decoration. Everything below is structure, spacing and
 * measure. There is no colour here that is not already a measured token, so
 * check-contrast.py still governs every contrast claim in these pages.
 */

/* ---------------------------------------------------------------------------
 * Page frame
 * ------------------------------------------------------------------------- */

body {
  margin: 0;
  /* A measure, not a full-width page. Long lines are the commonest reason
   * prose goes unread, and this is a site whose whole job is prose. */
  --measure: 46rem;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--mkoy-space-4);
}

/* ---------------------------------------------------------------------------
 * Masthead
 *
 * The wordmark is HTML TEXT, not the SVG logo, and that is deliberate. The
 * wordmark SVG uses live <text> with the brand font stack, so it renders
 * differently on every visitor's machine; as HTML it is selectable, scales with
 * the reader's font size, and needs no font to be downloaded. The monogram
 * beside it IS art, and its letters are outlined.
 * ------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--mkoy-border);
  background: var(--mkoy-panel);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mkoy-space-3);
  padding-top: var(--mkoy-space-3);
  padding-bottom: var(--mkoy-space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--mkoy-space-2);
  text-decoration: none;
  color: var(--mkoy-ink);
  font-weight: var(--mkoy-weight-heading);
  font-size: var(--mkoy-text-lg);
  line-height: var(--mkoy-leading-tight);
}

.brand:hover { text-decoration: underline; }
.brand img { display: block; width: 2rem; height: 2rem; }
.brand .oy { color: var(--mkoy-muted); font-weight: var(--mkoy-weight-body); }

/* Which site you are on. The two sites share everything else, so this line is
 * the only thing telling a visitor which one they reached. */
.masthead .site-name {
  color: var(--mkoy-muted);
  font-size: var(--mkoy-text-sm);
  border-left: 1px solid var(--mkoy-border);
  padding-left: var(--mkoy-space-3);
}

nav.top { margin-left: auto; display: flex; gap: var(--mkoy-space-3); align-items: center; }
nav.top a { font-size: var(--mkoy-text-sm); }

/* The language switch is a link, not a control: the choice is in the URL, so it
 * can be bookmarked and shared, and nothing needs to be remembered about the
 * reader between visits. */
.lang { font-size: var(--mkoy-text-sm); display: inline-flex; gap: var(--mkoy-space-2); }
.lang [aria-current] { font-weight: var(--mkoy-weight-emphasis); text-decoration: none; color: var(--mkoy-ink); }

/* ---------------------------------------------------------------------------
 * Content
 * ------------------------------------------------------------------------- */

main { padding: var(--mkoy-space-8) 0; }
main > .wrap > :first-child { margin-top: 0; }

h1 {
  font-size: var(--mkoy-text-3xl);
  line-height: var(--mkoy-leading-tight);
  margin: 0 0 var(--mkoy-space-3);
}

/* The sentence under an h1 that says what the page is. Larger than body text
 * and quieter than the heading. */
.lede {
  font-size: var(--mkoy-text-lg);
  color: var(--mkoy-ink);
  margin: 0 0 var(--mkoy-space-6);
}

h2 {
  font-size: var(--mkoy-text-xl);
  margin: var(--mkoy-space-8) 0 var(--mkoy-space-2);
  padding-top: var(--mkoy-space-3);
  border-top: 1px solid var(--mkoy-hairline);
}

h3 { font-size: var(--mkoy-text-lg); margin: var(--mkoy-space-6) 0 var(--mkoy-space-1); }
p, li { line-height: var(--mkoy-leading-body); }
ul { padding-left: var(--mkoy-space-4); }
li { margin-bottom: var(--mkoy-space-1); }

/* ---------------------------------------------------------------------------
 * Blocks
 * ------------------------------------------------------------------------- */

/* One offering: a product, or an area of consulting work. A bordered block
 * rather than a card with a shadow -- the border is structure, a shadow would
 * be decoration. */
.item {
  border: 1px solid var(--mkoy-border);
  border-radius: var(--mkoy-radius);
  padding: var(--mkoy-space-4);
  margin: var(--mkoy-space-4) 0;
  background: var(--mkoy-panel);
}

.item h3 { margin-top: 0; }
.item p:last-child { margin-bottom: 0; }

/* An offering that does not exist yet. Muted and dashed, so it reads as a
 * placeholder rather than a promise. Announcing software that does not run is
 * a poor advertisement for a company selling regulatory rigour. */
.item.reserved {
  background: transparent;
  border-style: dashed;
  color: var(--mkoy-muted);
}

.item.reserved h3 { color: var(--mkoy-muted); }

.tag {
  display: inline-block;
  font-size: var(--mkoy-text-xs);
  font-family: var(--mkoy-font-mono);
  color: var(--mkoy-muted);
  border: 1px solid var(--mkoy-border);
  border-radius: var(--mkoy-radius);
  padding: 0 var(--mkoy-space-1);
  margin-left: var(--mkoy-space-2);
  vertical-align: middle;
}

/* Facts: registered name, business id, address. A definition list, because
 * that is what it is. */
.facts { margin: var(--mkoy-space-4) 0; }
.facts dt { color: var(--mkoy-muted); font-size: var(--mkoy-text-sm); margin-top: var(--mkoy-space-2); }
.facts dd { margin: 0; }

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--mkoy-border);
  background: var(--mkoy-panel);
  margin-top: var(--mkoy-space-8);
  padding: var(--mkoy-space-6) 0;
  font-size: var(--mkoy-text-sm);
  color: var(--mkoy-muted);
}

footer a { color: var(--mkoy-accent); }
footer .cols { display: flex; flex-wrap: wrap; gap: var(--mkoy-space-8); }
footer p { margin: 0 0 var(--mkoy-space-1); }

/* The line that says this is not legal advice. Required by
 * brand-style-guide.md section 1 wherever a compliance claim appears, and it
 * must be legible rather than hidden in small print. */
.disclaimer {
  margin-top: var(--mkoy-space-6);
  padding-top: var(--mkoy-space-3);
  border-top: 1px solid var(--mkoy-hairline);
  color: var(--mkoy-muted);
  font-size: var(--mkoy-text-sm);
}

/* ---------------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------------- */

@media (max-width: 34rem) {
  .masthead .wrap { gap: var(--mkoy-space-2); }
  .masthead .site-name { border-left: 0; padding-left: 0; flex-basis: 100%; }
  nav.top { margin-left: 0; flex-basis: 100%; }
  footer .cols { gap: var(--mkoy-space-4); }
}