/* The welcome page (web/welcome.php, card #433): the logo and name, the big golden Read the Bible, then the features and
   why to make an account, on one screen of a computer (1280x800) and two to three of a phone. Only what is new here;
   the rest is app.css. The gold is the logo's (assets/app-icon/mark.png). */
:root {
  --wl-gold-1: #f5d98f;          /* the golden button: a light top, a deeper foot, dark words */
  --wl-gold-2: #e2b04f;
  --wl-gold-3: #d49a32;          /* the gilt's deeper band (as the logo's: assets/app-icon) */
  --wl-gold-ink: #2a1c04;
  --wl-gold-glint: rgba(255,250,228,.85);   /* the light that runs across it under the pointer */
  --wl-bevel-hi: rgba(255,250,230,.75);     /* the bevel: a lit upper edge, a shaded lower one */
  --wl-bevel-lo: rgba(120,72,0,.40);
  --wl-gold-edge: rgba(150,100,10,.35);
  --wl-glow: rgba(255,200,90,.30);  /* the flame's light behind the logo */
}
:root[data-theme="dark"] {
  --wl-gold-1: #f0cf7c;
  --wl-gold-2: #d39c3a;
  --wl-gold-3: #bf8526;
  --wl-gold-ink: #1a1205;
  --wl-gold-glint: rgba(255,246,214,.75);
  --wl-bevel-hi: rgba(255,244,210,.60);
  --wl-bevel-lo: rgba(70,40,0,.55);
  --wl-gold-edge: rgba(255,214,120,.35);
  --wl-glow: rgba(255,200,90,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wl-gold-1: #f0cf7c;
    --wl-gold-2: #d39c3a;
    --wl-gold-3: #bf8526;
    --wl-gold-ink: #1a1205;
    --wl-gold-glint: rgba(255,246,214,.75);
  --wl-bevel-hi: rgba(255,244,210,.60);
  --wl-bevel-lo: rgba(70,40,0,.55);
    --wl-gold-edge: rgba(255,214,120,.35);
    --wl-glow: rgba(255,200,90,.16);
  }
}

.wl { max-width: 72rem; margin: 0 auto; padding: .4rem max(1rem, env(safe-area-inset-left)) 1rem; }

/* The top: logo, name, one line, the button. */
.wl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wl-logo { display: block; width: auto; height: 4.5rem; margin-bottom: .3rem;
  filter: drop-shadow(0 0 1.2rem var(--wl-glow)); }
.wl-hero h1 { font-size: 2rem; margin: 0 0 .3rem; }
.wl-lede { margin: 0 0 .7rem; max-width: 38rem;   /* (wide enough that Donate, #431, stays on the second line) */ color: var(--muted); }
a.wl-read {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.75rem; min-width: 18rem; padding: 0 2.5rem; border-radius: var(--radius);
  position: relative; overflow: hidden; isolation: isolate;
  /* gilt: bright, a deeper band, bright again, deep at the foot, like the logo's gold */
  background-color: var(--wl-gold-2); color: var(--wl-gold-ink);
  background-image: linear-gradient(172deg, var(--wl-gold-1) 0%, var(--wl-gold-2) 38%, var(--wl-gold-3) 52%,
    var(--wl-gold-1) 74%, var(--wl-gold-3) 100%);
  border: 1px solid var(--wl-gold-edge);
  box-shadow: inset 0 2px 1px var(--wl-bevel-hi), inset 0 -3px 2px var(--wl-bevel-lo), inset 2px 0 2px -1px var(--wl-bevel-hi),
    inset -2px 0 2px -1px var(--wl-bevel-lo), 0 2px 8px var(--shadow);
  font-size: 1.35rem; font-weight: 700; text-decoration: none; letter-spacing: .01em;
}
/* Under the pointer the gold does not darken: a skewed band of light crosses it slowly, then rests, every 4.5 s
   (card #442; Larry: "too quick/frequent"). The band moves by transform, which the browser does cheaply. */
a.wl-read::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--wl-gold-glint) 50%, transparent);
  transform: skewX(-22deg);
}
a.wl-read:hover {   /* design-ok: gold-glint */
  box-shadow: inset 0 2px 1px var(--wl-bevel-hi), inset 0 -3px 2px var(--wl-bevel-lo), inset 2px 0 2px -1px var(--wl-bevel-hi),
    inset -2px 0 2px -1px var(--wl-bevel-lo), 0 2px 14px var(--wl-glow), 0 2px 8px var(--shadow);
}
a.wl-read:hover::before { animation: wl-glint 4.5s ease-in-out infinite; }
@keyframes wl-glint { 0% { transform: skewX(-22deg) translateX(0); } 40%, 100% { transform: skewX(-22deg) translateX(420%); } }
a.wl-read:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Below it: the features, and beside them (below them on a phone) the account. */
.wl-body { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1rem; margin-top: .9rem; align-items: start; }
.wl-features, .wl-account { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: calc(1rem - 1px) calc(1.1rem - 1px) calc(1.1rem - 1px); }   /* (less the edge: card #343 keeps their size) */
.wl-body h2 { font-size: 1.1rem; margin: 0 0 .75rem; padding-bottom: .4rem; position: relative; }
.wl-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 2px; background: var(--mark); }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem 1.2rem; }
/* The features' columns follow the box's own width, not the window's (#517): three only when each can be 12rem. */
.wl-features { container-type: inline-size; }
.wl-features .wl-list { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
@container (min-width: 25.2rem) { .wl-features .wl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; } }
@container (min-width: 38.4rem) { .wl-features .wl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wl-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; line-height: 1.35; }
.wl-list strong { display: block; font-size: 1rem; }
.wl-list span { color: var(--muted); }
.wl-ic { flex: none; width: 24px; height: 24px; margin-top: .1rem; color: var(--mark); }
.wl-letters { display: grid; place-items: center; font-family: "Times New Roman", Georgia, serif; font-size: 1.05rem; font-weight: 700; white-space: nowrap; letter-spacing: -.02em; }

/* The account's button: the site's main button (button.primary's look), a link here; just below its heading (#442). */
a.wl-signup {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); margin: 0 0 1rem;
  border-radius: 10px; background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none;
}
a.wl-signup:hover { background: var(--button-hover); /* design-ok: filled-hover */ }
.wl-signin { margin: .6rem 0 0; text-align: center; font-size: .92rem; color: var(--muted); }

@media (max-width: 900px) {
  .wl-body { grid-template-columns: minmax(0, 1fr); }
  .wl-account { order: -1; }   /* one column (phones): the account second, after Read the Bible (Larry, #442) */
}
@media (max-width: 560px) {
  .wl { padding-top: 1rem; }
  .wl-logo { height: 4.5rem; }
  .wl-hero h1 { font-size: 1.7rem; }
  a.wl-read { width: 100%; min-width: 0; }
}