/* simai.io portal. Colours are SIMAI Framework roles, so the whole site
   follows .theme-light / .theme-dark on <html>. This is the placeholder
   shell; the shared shell component of the Framework replaces the header
   and footer rules (docs/SHELL.md). */

/* Secondary text. In the dark theme on-surface-variant reaches only 4.0:1 on
   surface-container, so it is mixed towards on-surface there. */
.theme-light { --ink-muted: var(--sf-on-surface-variant); }
.theme-dark { --ink-muted: color-mix(in srgb, var(--sf-on-surface) 35%, var(--sf-on-surface-variant)); }

:root {
  --gutter: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
}
@media (min-width: 48rem) { :root { --gutter: 2rem; } }

html { background: var(--sf-surface-0); }
body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sf-surface-0);
  color: var(--sf-on-surface);
  overflow-x: clip;
}
main { flex: 1; }
a { color: var(--sf-primary); text-underline-offset: 0.2em; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 700; }
h3 { font-size: 1.0625rem; line-height: 1.4; font-weight: 700; }
.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; line-height: 1.45; }

:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: -4rem;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  background: var(--sf-primary);
  color: var(--sf-on-primary);
}
.skip:focus { inset-block-start: var(--space-2); }

.wrap {
  inline-size: 100%;
  max-inline-size: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Header */
.top { border-block-end: 1px solid var(--sf-outline-variant); background: var(--sf-surface-0); }
.top__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-block: var(--space-3); }
.brand { display: inline-flex; align-items: center; color: var(--sf-on-surface); text-decoration: none; }
/* The SIMAI logo, inline so its wordmark takes the theme's on-surface. */
.brand__logo { display: block; block-size: 2rem; inline-size: auto; }
.top__tools { display: flex; align-items: center; gap: var(--space-2); }
.top__nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-inline-start: auto; }
.top__nav a, .foot__nav a { color: var(--sf-on-surface); text-decoration: none; padding-block: var(--space-2); }
.top__nav a:hover, .foot__nav a:hover { color: var(--sf-primary); text-decoration: underline; }
.family { scroll-margin-block-start: var(--space-4); }
@media (max-width: 40rem) {
  .top__nav { margin-inline-start: 0; order: 3; inline-size: 100%; }
  .top__tools { margin-inline-start: auto; }
}

/* The language menu: a globe button and its list, shaped like Docara's. */
.lang { position: relative; }
.lang > summary { list-style: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang__popup {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 20;
  min-inline-size: 10rem;
  padding: var(--space-1);
  border: 1px solid var(--sf-outline-variant);
  border-radius: var(--radius-m);
  /* surface-container is translucent; lay it over the solid surface. */
  background: linear-gradient(var(--sf-surface-container), var(--sf-surface-container)), var(--sf-surface-0);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.24);
}
.lang__popup ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: 2rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-s);
  color: var(--sf-on-surface);
  text-decoration: none;
}
.lang__option:hover { background: var(--sf-surface-container-hover); }

/* Segmented group: theme and language */
.seg {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-m);
  background: var(--sf-surface-container);
}
.seg__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2rem;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--sf-on-surface);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}
.seg__btn:hover { background: var(--sf-surface-container-hover); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-current="true"] { background: var(--sf-surface-0); color: var(--sf-primary); }
.seg__btn svg { inline-size: 1rem; block-size: 1rem; }
.seg--icon .seg__btn span {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.seg--icon .seg__btn { padding-inline: var(--space-2); }

/* Intro */
.intro { padding-block: var(--space-12) var(--space-8); }
.intro__body { display: grid; gap: var(--space-4); }
.intro__lead { max-inline-size: 46rem; font-size: 1.125rem; line-height: 1.55; color: var(--ink-muted); }

/* The home hero: a background effect of the catalogue, placed by SF.Effects
   (data-sf-effect). The effect takes the area's role colours. The catalogue
   guarantees 4.5:1 only for on-surface text over an effect at its defaults,
   so the lead uses on-surface here, not the muted ink. */
.intro--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-block-size: clamp(24rem, 64vh, 40rem);
  padding-block: var(--space-12);
  background: var(--sf-surface-0);
  color: var(--sf-on-surface);
}
.intro--hero .intro__body { position: relative; z-index: 1; }
.intro--hero h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); max-inline-size: 18ch; }
.intro--hero .intro__lead { color: var(--sf-on-surface); }

/* Families and products */
.family { display: grid; gap: var(--space-4); padding-block: var(--space-6); }
.family + .family { border-block-start: 1px solid var(--sf-outline-variant); }
.family__head { display: grid; gap: var(--space-2); }
.family__summary { color: var(--ink-muted); max-inline-size: 46rem; }
.family__empty { color: var(--ink-muted); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--sf-outline-variant);
  border-radius: var(--radius-l);
  background: var(--sf-surface-container);
}
.card:has(a.card__link):hover { border-color: var(--sf-primary); }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.8125rem; color: var(--ink-muted); }
.card__link { color: var(--sf-on-surface); text-decoration: none; }
/* The whole card is the link's target. */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.card__summary { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.5; }
.card__host { font-size: 0.8125rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.card--soon { background: transparent; border-style: dashed; }

.badge {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius-s);
  background: var(--sf-primary-container);
  color: var(--sf-on-primary-container);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
  vertical-align: middle;
}
.badge--plain { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--sf-outline-variant); }
h1 .badge { margin-inline-start: var(--space-3); }

.button {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--sf-primary);
  color: var(--sf-on-primary);
  text-decoration: none;
  font-weight: 600;
}

/* Footer */
.foot { margin-block-start: var(--space-12); border-block-start: 1px solid var(--sf-outline-variant); }
.foot__row { display: grid; gap: var(--space-3); padding-block: var(--space-6); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }