/* tobiasnafzger.ch: one light scheme, one 40rem column, system font, petrol accent (02-UI-SPEC). */

:root {
  color-scheme: light;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --color-bg: #FBFBF9;
  --color-text: #1D2125;
  --color-muted: #5A6169;
  --color-accent: #0E5E6F;
  --color-accent-strong: #0A4753;
  --color-rule: #D5D9DC;
}

html {
  background-color: var(--color-bg);
}

body {
  max-inline-size: 40rem;
  margin-block: 0;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Header and main are flex items, so margins do not collapse across them. The gap from the header to
   the content is the margin of the first element in main (the section on the start page, the h1 on
   sub-pages): 48px; from 48rem up the header adds 16px below itself, giving 64px. */
header {
  padding-block-start: var(--space-2xl);
}

main {
  flex: 1 0 auto;
}

@media (min-width: 48rem) {
  header {
    padding-block-start: var(--space-3xl);
    padding-block-end: var(--space-md);
  }
}

/* Typography: four sizes, weights 400 and 600 only. */
h1,
h2 {
  margin: 0;
  overflow-wrap: break-word;
}

h1 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

p {
  margin: 0;
  hyphens: auto;
}

/* A mail address in running text is never hyphenated, like a link: a copied address must stay correct. */
.mail-text {
  hyphens: manual;
}

/* Tobias' name is never broken: neither hyphenated nor split between first and last name (G-03-3). */
.name {
  hyphens: manual;
  white-space: nowrap;
}

address {
  font-style: normal;
}

.activity {
  margin-block-start: var(--space-sm);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-muted);
}

.header-mail {
  margin-block-start: var(--space-md);
  font-size: 1rem;
  line-height: 1.5;
}

/* Spacing. Every section carries the same margin, so removing one changes nothing else. */
section {
  margin-block-start: var(--space-2xl);
}

h2 + p,
p + p,
address + p {
  margin-block-start: var(--space-md);
}

main > h1 {
  margin-block-start: var(--space-2xl);
}

main > h1 + * {
  margin-block-start: var(--space-xl);
}

footer {
  margin-block-start: var(--space-3xl);
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--color-rule);
  font-size: 1rem;
  line-height: 1.5;
}

/* Links: always underlined (the accent alone does not separate them from text), visible focus ring. */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  hyphens: manual;
  overflow-wrap: anywhere;
}

a:hover,
a:active {
  color: var(--color-accent-strong);
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: var(--space-xs);
}

a.home {
  color: var(--color-text);
  font-weight: 600;
}

a.home:hover,
a.home:active {
  color: var(--color-text);
  text-decoration-thickness: 2px;
}

/* Tap target of at least 44 x 44 px for every standalone link. The negative block margin keeps the hit box at
   44 x 44 while the line box keeps the text's line height, so the link does not push away from its sentence. */
a.target {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  margin-block: calc((1lh - 44px) / 2);
}