/* Waslet — coming soon.
 *
 * Two things live here. First the base block the design bundle shipped inline
 * (colours, selection, keyframes), lifted out so there is one stylesheet
 * rather than a <style> buried in the template. Then the responsive layer,
 * which the bundle had none of — it was a fixed desktop composition.
 *
 * The markup carries inline styles for everything decorative, so the layout
 * hooks below are `!important` where they have to beat one. That is confined
 * to the .wsl-* classes on purpose. */

/* ---------------------------------------------------------------- base --- */

html, body { margin: 0; padding: 0; }

body {
  background: #111512;
  color: #F0EADA;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

a { color: #CEFF8C; text-decoration: none; }
a:hover { color: #F0EADA; }

::selection { background: #CEFF8C; color: #16241A; }

input::placeholder { color: rgba(240, 234, 218, .4); }

/* The bundle killed the focus ring outright. Keep it off for mouse clicks —
 * that is what it was for — but a keyboard user has to be able to see where
 * they are, so :focus-visible puts it back. Order matters: both selectors
 * carry the same specificity, so this has to come second. */
input:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2.5px solid #CEFF8C;
  outline-offset: 3px;
  border-radius: 6px;
}

/* On the cream and sage sections a lime ring is nearly invisible. */
.wsl-inside a:focus-visible, .wsl-inside button:focus-visible,
.wsl-carry a:focus-visible, .wsl-carry button:focus-visible {
  outline-color: #16241A;
}

@keyframes wsl-breathe {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.4); }
}
@keyframes wsl-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes wsl-marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------- layout --- */
/* One shell owns the page gutter and the measure. Every section used to
 * repeat `max-width:1240px;margin:0 auto;padding:… 32px` inline, which meant
 * the gutter could not be narrowed for a phone. */

/* `.lnd-shell` is the class <waslet-footer> emits. It is the landing page's
   name for the same container, and the component is shared verbatim between
   the two sites, so the alias lives here rather than in the component. */
.wsl-shell,
.lnd-shell {
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 32px !important;
}

.wsl-header      { padding-block: 22px !important; }
.wsl-hero        { padding-block: 30px 0 !important; }
.wsl-inside-head { padding-block: 76px 0 !important; }
.wsl-carry       { padding-block: 66px !important; }

/* ------------------------------------------------------------- footer --- */
/* Rendered by <waslet-footer>, which sets its own vertical rhythm inline with
   clamp(). Only the link rows need styling here. */

waslet-footer { display: block; }

.lnd-footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* A comfortable touch target without moving the text: the box grows, the
   baseline does not. */
.lnd-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.wsl-cards {
  margin-top: 44px !important;
  padding-bottom: 80px !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* The handover code is a number, and numbers stay left-to-right even inside
   Arabic text. Without this the flex row follows the rtl container and 8821
   renders as 1288. */
.wsl-code { direction: ltr; }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .wsl-shell, .lnd-shell { padding-inline: 24px !important; }
}

@media (max-width: 860px) {
  .wsl-inside-head { padding-block: 60px 0 !important; }
  .wsl-cards       { margin-top: 34px !important; padding-bottom: 60px !important; }
  .wsl-carry       { padding-block: 52px !important; }
}

@media (max-width: 720px) {
  .wsl-shell, .lnd-shell { padding-inline: 20px !important; }
  .wsl-header { padding-block: 18px !important; }
  .wsl-hero   { padding-block: 22px 0 !important; }

  /* The arcs sit behind the headline. At this width they stop being a
   * backdrop and start competing with the text they sit under. */
  .wsl-arcs { opacity: .5 !important; }
}

/* `minmax(300px, 1fr)` is a *minimum* of 300px, so once the shell is narrower
 * than that the track overflows the page rather than shrinking with it. Below
 * this width there is only ever one column anyway — say so explicitly. */
@media (max-width: 620px) {
  .wsl-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 480px) {
  .wsl-shell, .lnd-shell { padding-inline: 16px !important; }
  .wsl-arcs  { opacity: .35 !important; }
}

/* The language toggle is a 25px-tall pill — fine for a cursor, small for a
 * thumb. Grow it only where the pointer is actually coarse, so the desktop
 * composition is untouched. */
@media (pointer: coarse) {
  .wsl-header button {
    min-height: 44px !important;
    padding-inline: 16px !important;
  }
}

/* ----------------------------------------------------------- reduced --- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- print --- */

@media print {
  body { background: #fff; color: #000; }
  .wsl-arcs, .wsl-marquee, .wsl-form { display: none !important; }
  .wsl-shell, .lnd-shell { padding-inline: 0 !important; max-width: none !important; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}