/* Saavuttavan käyntikorttisivun teema. Platformin global.css ladataan ensin,
   joten täällä määritellyt muuttujat voittavat. Värit ja fontit Saavuttavan
   brändistä (sama kuin saavuttava.fi). Fontit ovat tämän sivuston omissa
   tiedostoissa (assets/fonts, SIL Open Font License), ei Googlen palvelimella. */
@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/AlbertSans-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-body: "Albert Sans", system-ui, sans-serif;
  --font-heading: "Montserrat", "Albert Sans", sans-serif;
  --radius: 1rem;
}

/* Vaalea teema */
:root,
:root[data-theme="light"] {
  --color-text: #240931;
  --color-heading: #38044f;
  --color-link: #38044f;
  --color-link-hover: #b41e7d;
  --color-accent: #b41e7d;
  --color-accent-contrast: #ffffff;
  --color-surface: #f7f3fa;
  --color-surface-subtle: #efebf7;
  --color-page-background: #e7e2f3;
  --color-card-surface: #f7f3fa;
  --color-surface-strong: #38044f;
  --color-surface-stronger: #180425;
  --color-on-strong: #ffffff;
  --color-border: #9b84b0;
  --color-muted: #644673;
  /* Kontrasti: #b41e7d kortilla 5,6:1, sivupalstalla 5,2:1. */
  --card-accent: #b41e7d;
  --card-accent-text: #b41e7d;
  --footer-illustration-color: #f58cc3;
  --braille-color: #38044f;
  --braille-opacity: 0.09;
}

/* Tumma teema: käyttäjän valinta ja järjestelmän asetus */
:root[data-theme="dark"] {
  --color-text: #f8f4fb;
  --color-heading: #f8f4fb;
  --color-link: #f58cc3;
  --color-link-hover: #ffffff;
  --color-accent: #f58cc3;
  --color-accent-contrast: #180425;
  --color-surface: #180425;
  --color-surface-subtle: #251035;
  --color-page-background: #12061c;
  --color-card-surface: #2b193b;
  --color-surface-strong: #12061c;
  --color-surface-stronger: #0d0414;
  --color-on-strong: #ffffff;
  --color-border: #765b86;
  --color-muted: #d4c6df;
  --card-accent: #f58cc3;
  --card-accent-text: #f58cc3;
  --footer-illustration-color: #f58cc3;
  --braille-color: #f58cc3;
  --braille-opacity: 0.1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-text: #f8f4fb;
    --color-heading: #f8f4fb;
    --color-link: #f58cc3;
    --color-link-hover: #ffffff;
    --color-accent: #f58cc3;
    --color-accent-contrast: #180425;
    --color-surface: #180425;
    --color-surface-subtle: #251035;
    --color-page-background: #12061c;
    --color-card-surface: #2b193b;
    --color-surface-strong: #12061c;
    --color-surface-stronger: #0d0414;
    --color-on-strong: #ffffff;
    --color-border: #765b86;
    --color-muted: #d4c6df;
    --card-accent: #f58cc3;
    --card-accent-text: #f58cc3;
    --footer-illustration-color: #f58cc3;
    --braille-color: #f58cc3;
    --braille-opacity: 0.1;
  }
}

body { background: var(--color-page-background); }
h1, h2, h3 { font-weight: 700; }

/* Yläotsikon perään kolme pistettä kuten Saavuttavan logossa. Koriste. */
.business-card .eyebrow::after {
  display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.5em; vertical-align: -0.1em; content: "";
  background:
    radial-gradient(circle, var(--card-accent) 0 60%, transparent 62%) 70% 0 / 0.38em 0.38em no-repeat,
    radial-gradient(circle, var(--card-accent) 0 60%, transparent 62%) 0 45% / 0.38em 0.38em no-repeat,
    radial-gradient(circle, var(--card-accent) 0 60%, transparent 62%) 0 100% / 0.38em 0.38em no-repeat;
}

/* Palveluiden nimet korostusvärillä. */
.business-card__services h3 { color: var(--card-accent-text); font-size: 1.05em; }

/* Footerin logo */
.footer-banner img { width: min(14rem, 60vw); }

/* Footer bottom bar: the link lines up with the copyright text. */
.footer-meta .footer-meta__inner a { padding-inline: 0; }
@media (min-width: 900px) {
  .footer-meta__inner { align-items: center; }
}

/* Square corners on the card sides. */
.business-card { border-radius: 0; }

/* Braille strip (the Saavuttava motif) behind the cards: tilted, faint,
   from the top-left corner and partly past the page edge. Decorative. */
main { position: relative; isolation: isolate; overflow-x: clip; }
main::before {
  position: absolute; z-index: -1; top: -6rem; left: -4rem;
  width: clamp(7rem, 16vw, 13rem); aspect-ratio: 355 / 2481;
  background: var(--braille-color); opacity: var(--braille-opacity);
  -webkit-mask: url("/graphics/pistekirjoitus.svg") center / contain no-repeat;
  mask: url("/graphics/pistekirjoitus.svg") center / contain no-repeat;
  transform: rotate(-24deg); transform-origin: top left;
  content: ""; pointer-events: none;
}