/* Self-hosted woff2 fonts (#504), OFL texts in fonts/. Relative urls keep /nl/, /ro/ and
   version folders working. Fraunces has no 600 file: Medium serves 500-600. Instrument
   Sans has no italic file: the browser synthesises it. */
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/DMMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fraunces-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/Fraunces-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fraunces-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InstrumentSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/InstrumentSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/InstrumentSans-SemiBold.woff2") format("woff2");
}

/* Garden Assistant manual look (#498): app colours and fonts, scene banners.
   Mobile first; the desktop crop takes over from 45em (720px). Home keeps its
   stacked layout up to 60em (960px), where the copy moves onto the sky.
   Material sets html font-size to 125%, so sizes here are in px. */

:root > * {
  --md-primary-fg-color: #2F4126;
  --md-primary-fg-color--light: #4A6138;
  --md-primary-fg-color--dark: #1F2A19;
  --md-accent-fg-color: #C45A2C;
  --md-text-font: "Instrument Sans";
  --md-code-font: "DM Mono";
  --ga-paper: #F5F1E8;
  --ga-terra: #A84A22; /* button fill: 5.1:1 against paper text */
  --ga-terra-dark: #8E3D1B;
}

.md-typeset h1,
.md-typeset h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
}
.md-typeset h2 {
  font-weight: 600;
}

/* ---------- Scene banner ---------- */
.ga-scene {
  position: relative;
  overflow: hidden;
  height: 150px;
  color: var(--ga-scene-text);
}
.ga-scene__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ga-scene__svg--wide {
  display: none;
}
.ga-scene__copy {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  padding: 16px 20px 0;
  box-sizing: border-box;
}
.ga-scene__title {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Home: copy on the sky, garden strip below it */
.ga-scene--home {
  height: auto;
  padding-bottom: 180px;
}
.ga-scene--home .ga-scene__copy {
  position: relative;
  padding: 26px 20px 0;
}
.ga-scene--home .ga-scene__svg {
  top: auto;
  height: 180px;
}

/* The banner shows the title; keep the content H1 for screen readers, search and the TOC. */
.ga-scene ~ .md-main .md-content h1:first-of-type {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media screen and (min-width: 45em) {
  .ga-scene {
    height: 240px;
  }
  .ga-scene__svg--phone {
    display: none;
  }
  .ga-scene__svg--wide {
    display: block;
  }
  .ga-scene__copy {
    padding: 36px 24px 0;
  }
  .ga-scene__title {
    font-size: clamp(34px, 3.8vw, 44px);
  }
  .ga-scene--home {
    height: auto;
  }
  .ga-scene--home .ga-scene__copy {
    padding: 32px 24px 0;
  }
  .ga-scene--home .ga-scene__svg--phone {
    display: block;
  }
  .ga-scene--home .ga-scene__svg--wide {
    display: none;
  }
}

@media screen and (min-width: 60em) {
  .ga-scene--home {
    height: clamp(380px, 44vw, 460px);
    padding-bottom: 0;
  }
  .ga-scene--home .ga-scene__copy {
    position: absolute;
    padding: clamp(36px, 5vw, 56px) 24px 0;
  }
  .ga-scene--home .ga-scene__svg {
    top: 0;
    height: 100%;
  }
  .ga-scene--home .ga-scene__svg--phone {
    display: none;
  }
  .ga-scene--home .ga-scene__svg--wide {
    display: block;
  }
}

/* ---------- Home hero copy (title, lede, buttons from index.md front matter) ---------- */
.ga-scene--home .ga-scene__copy {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.ga-scene__title--home {
  font-size: 34px;
  max-width: 34ch;
}
.ga-scene__title--home em {
  font-style: italic;
}
.ga-scene__lede {
  margin: 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.45;
}
.ga-scene__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.ga-scene .md-button.ga-scene__btn {
  margin: 0;
  padding: 9px 16px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  background: transparent;
}
.ga-scene .md-button--primary.ga-scene__btn {
  border-color: var(--ga-terra);
  background: var(--ga-terra);
  color: var(--ga-paper);
}
.ga-scene .md-button.ga-scene__btn:focus,
.ga-scene .md-button.ga-scene__btn:hover {
  border-color: var(--ga-terra);
  background: var(--ga-terra);
  color: var(--ga-paper);
}
.ga-scene .md-button--primary.ga-scene__btn:focus,
.ga-scene .md-button--primary.ga-scene__btn:hover {
  border-color: var(--ga-terra-dark);
  background: var(--ga-terra-dark);
}
@media screen and (min-width: 60em) {
  .ga-scene--home .ga-scene__copy {
    gap: 14px;
  }
  .ga-scene--home .ga-scene__copy > * {
    max-width: min(560px, 58%);
  }
  .ga-scene__title--home {
    font-size: clamp(38px, 4.8vw, 54px);
  }
  .ga-scene__lede {
    font-size: 16px;
    max-width: min(36ch, 58%);
  }
}

/* ---------- Motion: water from the can, fireflies at dusk. Off with reduced motion. ---------- */
/* drops stay dashed when still */
.ga-scene .water {
  stroke-dasharray: 5 9;
}
@media (prefers-reduced-motion: no-preference) {
  .ga-scene .water {
    animation: ga-pour 900ms linear infinite;
  }
  .ga-scene .twinkle {
    animation: ga-twinkle 2.6s ease-in-out infinite alternate;
  }
}
@keyframes ga-pour {
  to {
    stroke-dashoffset: -28;
  }
}
@keyframes ga-twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}