/* ============================================================
   CHERT LIMS holding pages
   Layout only. Every colour, size, radius and shadow comes from
   chert-tokens.css; buttons and the header come from
   chert-components.css. No hex value and no physical property
   (left/right) may appear in this file: tests/t0000 enforces both.
   Numbers that are not tokens are quoted from the design system,
   with the section beside them.
   ============================================================ */

body {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
p { margin: 0; }

/* Latin text inside an Arabic page keeps the interface face. */
[lang="en"] { font-family: var(--font-ui); }

/* ---- Skip link (8.1) ---- */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--chert-ink);
  color: var(--chert-cream);
  font-size: var(--fs-sm);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Brand lockup (2.1): 32 px mark, 12 px gap, CHERT wordmark ---- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 44px;               /* touch target, 8.1 */
  color: var(--chert-ink);
  text-decoration: none;
}
.brand__mark { block-size: 32px; inline-size: auto; }
.brand__wordmark {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 639px) {
  .brand__mark { block-size: 28px; }  /* mobile header size, 2.1 */
}

/* ---- Language switcher (7.5): labelled in the target language ---- */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;               /* touch target, 8.1 */
  text-decoration: none;
}
.lang-switch { font-size: var(--fs-sm); line-height: var(--lh-base); }

/* ---- Hero (5.7) ---- */
.hero {
  padding-block: var(--space-9);
  text-align: center;
}
.hero__mark {
  display: block;
  block-size: 128px;
  inline-size: auto;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}
.badge {                              /* 6.7 */
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--chert-orange-tint);
  color: var(--chert-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.hero__title {                        /* --fs-display row, 4.2 */
  margin-block: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -1.5px;
  text-wrap: balance;
}
[lang="ar"] .hero__title {            /* 7.4: no display serif, no tracking */
  font-family: var(--font-ar);
  line-height: var(--lh-base);
  letter-spacing: normal;
}

/* ---- Starburst divider (6.7) ---- */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-7);
  color: var(--chert-ink);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--chert-border);
}
.divider .chert-star { inline-size: 24px; block-size: 24px; }

/* ---- Coming soon: the empty-state pattern (6.8) ---- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-9);
  text-align: center;
}
.empty .chert-star {
  inline-size: 48px;
  block-size: 48px;
  color: var(--chert-tan);
}
.empty__title {                       /* --fs-h1 row, 4.2 */
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -1px;
}
[lang="ar"] .empty__title {
  line-height: var(--lh-base);
  letter-spacing: normal;
}
.empty__line {
  max-inline-size: var(--maxw-prose);
  margin-block-end: var(--space-4);
  color: var(--chert-muted);
  font-size: var(--fs-lg);
}

@media (max-width: 639px) {           /* section padding, 5.2 */
  .hero, .empty { padding-block: var(--space-7); }
}

/* ---- Footer (3.4) ---- */
.footer {
  padding-block: var(--space-6);
  padding-inline: var(--gutter);
  background: var(--chert-dark);
  color: var(--chert-dark-muted);
  font-size: var(--fs-sm);
  text-align: center;
}