/* Jardami's website. Fonts served from this site, unmodified, from the app's font packages
   (SIL Open Font License: fonts/Lora_OFL.txt, fonts/Inter_OFL.txt). */
@font-face {
  font-family: "Lora";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Lora_600SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter_400Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/Inter_400Regular_Italic.ttf") format("truetype");
}

/* Coastal Herbs, from jardami-app/src/theme/colorSchemes/coastalHerbs.ts */
:root {
  color-scheme: light dark;
  --background: #eff5f5;
  --ink: #12262a;
  --ink-muted: #4c5e62;
  --primary: #185c64;
  --border-subtle: #d6e4e3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0e1a1c;
    --ink: #e6eeee;
    --ink-muted: #a2b6b8;
    --primary: #5fb3bc;
    --border-subtle: #2b4146;
  }
}

/* On an iPhone, follow the phone's own text size (Settings, Display & Brightness, Text Size). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}

html {
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 16px 3rem;
  container: page / inline-size;
}

/* No lone words, as in the app (jardami-app/.claude/rules/design.md).
   A paragraph's last two words are wrapped in .keep and stay together; texts of three words or fewer
   are left alone. Lines are evened out where the browser can (balance for headings, pretty for text). */
h1,
h2,
.tagline {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* When lines.js runs, it chooses the breaks, so the browser's own rewrapping is turned off. */
html[data-lines] p {
  text-wrap: wrap;
}

.keep {
  white-space: nowrap;
}

/* A word lines.js keeps whole, so its end isn't left alone on a line. */
.whole {
  -webkit-hyphens: manual;
  hyphens: manual;
  white-space: nowrap;
}

/* The column's width is measured in its own text size, so these follow the phone's text-size setting
   and zoom. Large text (a column under 15 of its letters' "em" widths): words of 8 letters or more may
   split by syllable, never leaving fewer than 4 letters on either side. */
@container page (max-width: 15em) {
  main,
  footer {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
  }
}

/* The largest text: a kept pair can be wider than the line, so it is let go rather than split mid-word. */
@container page (max-width: 10em) {
  .keep {
    white-space: normal;
  }
}

.language {
  margin: 0 0 2rem;
  text-align: end;
}

h1,
h2,
.tagline {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  margin: 0;
  font-size: min(3rem, 18vw);
  color: var(--primary);
}

.tagline {
  margin: 0.5rem 0 2rem;
  font-size: min(1.25rem, 11vw);
}

h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: min(1.25rem, 11vw);
  color: var(--primary);
}

p {
  margin: 0 0 1rem;
}

.status {
  font-style: italic;
}

footer {
  margin-top: 3rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-muted);
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
  hyphens: manual;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The language link is a comfortable tap target (WCAG 2.5.8). */
.language a {
  display: inline-block;
  padding: 0.5rem 0;
  min-height: 24px;
}