/* Styling for the landing page (landing.html).
   The rules live in an external file, as they do for the legal and maintenance pages, so
   that the CSP can forbid inline style-src entirely (no 'unsafe-inline'). Colours,
   radii, weights and the button come from style.css, which the page loads first, so it
   looks like part of the site in both themes and in bold text. There is no animation
   here: moving content that cannot be stopped can harm accessibility (WCAG 2.2.2). */

/* The whole width of the window, not the app's 520px column: the operator asked for a
   page that fills the screen, and a landing page is cards and a button rather than the
   running text the narrow column exists for. The side padding grows with the window so
   the cards never touch its edges; the lead paragraph alone keeps a readable measure. */
.landing-page {
  max-width: none;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}
.landing-header { margin: 10px 0 22px; }

/* Links in the running text. Without this a link with no class of its own falls back
   to the browser's default blue, which against this page's background fails WCAG
   1.4.3 — the same rule legal.css carries for the same reason. The underline stays, so
   colour is not the only thing marking a link (WCAG 1.4.1). The button and the footer
   set their own colour and are left alone. */
.landing-page main a:not(.btn) { color: var(--primary); text-decoration: underline; }
.landing-page .site-footer a { color: var(--muted); }

/* ===== The hero, and its twin at the foot of the page ===== */
.landing-hero {
  padding: 34px 24px 30px;
  text-align: center;
}
.landing-eyebrow { color: var(--primary); font-weight: var(--weight-bold); font-size: 0.9rem; }
.landing-hero h1 {
  font-size: 2rem;
  font-weight: var(--weight-heavy);
  line-height: 1.15;
  margin: 6px 0 14px;
}
.landing-lead {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  /* A line of body text across a 1400px window is unreadable, however wide the card;
     62ch is the measure the app's own paragraphs sit near. Centred inside the card. */
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .landing-hero { padding: 48px 32px 40px; }
  .landing-hero h1 { font-size: 2.5rem; }
  .landing-lead { font-size: 1.1rem; }
}
/* The app's .btn is display:block and 100% wide, which is right for a button in a
   column; here it is an <a>, so the block display is what makes the whole width the
   target rather than only the words. max-width keeps it a button and not a bar on a
   wide screen. */
.landing-cta {
  max-width: 320px;
  margin: 22px auto 0;
  text-decoration: none;
}
.landing-cta:hover { filter: brightness(1.08); }
.landing-cta:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.landing-cta-note { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.landing-hero-end { margin-top: 32px; }
.landing-end-title { font-size: 1.6rem; font-weight: var(--weight-heavy); margin: 0 0 10px; }

.landing-h2 { margin: 32px 0 14px; }

/* ===== The feature cards ===== */
.landing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* As many columns as 280px cards fit: two on a tablet, four across a wide desktop
   window, one on a phone. auto-fill rather than a fixed count, so the number follows
   the window instead of a breakpoint list. */
@media (min-width: 560px) {
  .landing-features { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.landing-feature {
  display: flex;
  gap: 14px;
  padding: 18px 16px;
  /* The card shadow is the app's, and eight of them in a grid is a lot of shadow; the
     border is enough to separate them. */
  box-shadow: none;
}
/* h3 on this page, h2 on the generated lang/ pages: those have no "What is in it"
   heading above the grid to sit under, because there is no translated string for one
   and inventing a heading in seventy languages to hold a level of nesting is not worth
   it. Both are the same card title and are drawn the same way. */
.landing-feature h3,
.landing-feature h2 { font-size: 1rem; font-weight: var(--weight-bold); margin: 0 0 6px; }
.landing-feature p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  /* A long run with no space pushes the page wider on a narrow screen and drags in a
     horizontal scroll (WCAG 1.4.10); break only when there is no alternative. */
  overflow-wrap: break-word;
}
/* The same 46px tinted square the home tiles draw their glyphs in, so the glyphs read
   as the app's own. The four tints are the badge pairs from style.css, each of which
   was checked for contrast there. */
.landing-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: var(--weight-heavy);
}
.landing-icon-green { background: var(--badge-green-bg); color: var(--badge-green); }
.landing-icon-amber { background: var(--badge-amber-bg); color: var(--badge-amber); }
.landing-icon-blue { background: var(--badge-blue-bg); color: var(--badge-blue); }
.landing-icon-purple { background: var(--badge-purple-bg); color: var(--badge-purple); }

/* ===== The three steps ===== */
.landing-steps {
  margin: 0;
  padding: 18px 18px 18px 40px;
  display: grid;
  gap: 12px;
  box-shadow: none;
}
.landing-steps li { font-size: 0.95rem; line-height: 1.7; color: var(--text); }
.landing-steps li::marker { color: var(--primary); font-weight: var(--weight-bold); }

/* ===== The caution ===== */
/* The amber edge is what faq.html gives the same notice: it separates the one box on
   the page that warns from the cards around it that describe. */
.landing-notice {
  margin-top: 32px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  /* Logical, not physical: the generated lang/ pages carry this same box in Arabic,
     Hebrew, Persian, Urdu and Pashto, where the edge belongs on the other side. */
  border-inline-start: 3px solid var(--badge-amber);
  border-radius: 12px;
}
.landing-notice-title { font-size: 1.05rem; font-weight: var(--weight-bold); margin: 0 0 8px; }
.landing-notice p { font-size: 0.9rem; line-height: 1.7; color: var(--text); margin: 0; }

@media (max-width: 400px) {
  .landing-hero { padding: 26px 18px 24px; }
  .landing-hero h1 { font-size: 1.7rem; }
}

/* Windows High Contrast and other forced-colour modes drop every background colour,
   so the wide green button became a line of text with nothing around it to say it is a
   button, and the tinted squares behind the glyphs vanished. A border survives forced
   colours (it is drawn in the system's own ink), which is all either needs. */
@media (forced-colors: active) {
  .landing-cta { border: 2px solid; }
  .landing-icon { border: 1px solid; }
}