/*
 * Roslagens bokhandel skin for the Anubis check pages (challenge, error, deny).
 * nginx injects this stylesheet into Anubis' HTML (see snippets/anubis-proxy.conf).
 *
 * The challenge page is cut down to the shop's page background, the shop logo, one
 * sentence (inserted by nginx as p.rb-line) and the Anubis character, which stays as
 * the project asks of free users. Error and deny pages keep their message and the
 * "Gå hem" button, so a visitor who is stuck can see why.
 * Tokens follow /opt/Webbutik/DESIGN.md.
 *
 * Loaded before Anubis' own xess.css, so selectors here win on specificity
 * (html:root, html body ...) rather than order.
 */

html:root {
  --rb-page: #fdfcfc;
  --rb-ink: #212529;
  --rb-ink-soft: rgb(33 37 41 / 0.7);
  --rb-blue: #3774c2;
  --rb-focus: oklch(70.8% 0 0deg);
  --rb-logo: url("/_anubis-brand/logo-black.png");

  /* Anubis' own variables */
  --background: var(--rb-page);
  --text: var(--rb-ink);
  --link-foreground: var(--rb-ink);
  --link-background: transparent;
}

@media (prefers-color-scheme: dark) {
  html:root {
    --rb-page: #1f1e1d;
    --rb-ink: oklch(96% 0 0deg);
    --rb-ink-soft: oklch(96% 0 0deg / 0.72);
    --rb-logo: url("/_anubis-brand/logo-white.png");
  }
}

/* html:root, not html: Anubis' inline <style> makes html a centring flex box. */
html:root {
  display: block;
  height: auto;
  margin: 0;
  background: var(--rb-page);
}

/* One centred column: logo, sentence, character. */
html body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  padding: 2rem 1rem;
  background: var(--rb-page);
  color: var(--rb-ink);
  -webkit-font-smoothing: antialiased;
}

/* The shop logo, as in the site header. */
html body::before {
  content: "";
  display: block;
  flex: none;
  width: min(13.75rem, 60vw);
  aspect-ratio: 859 / 281;
  background: var(--rb-logo) center / contain no-repeat;
}

html body main {
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 0;
  font-family: var(--body-sans-font);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

html body main .centered-div {
  margin: 0;
  padding: 0;
}

/* Everything the shop doesn't need to show. The challenge page's own heading,
   status and progress go (Anubis' script keeps running underneath). */
html body main footer,
html body main details,
html body main:has(#status) > h1,
html body #status,
html body #progress {
  display: none !important;
}

/* The one sentence. */
html body .rb-line {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
  text-wrap: balance;
}

/* The Anubis character underneath. */
html body #image {
  display: block;
  width: 100% !important;
  max-width: 8rem !important;
  height: auto;
  margin: 0 auto;
}

/* Error and deny pages keep their heading, message and way out. */
html body main > h1 {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rb-ink);
}

html body #anubis-script-error,
html body main .centered-div > p {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rb-ink-soft);
  text-wrap: pretty;
}

html body main .centered-div > p.rb-line {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  color: var(--rb-ink);
}

html body main .centered-div p > a[href="/"] {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 1.5rem;
  border: 1px solid var(--rb-blue);
  border-radius: 4px;
  background: var(--rb-blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

html body main .centered-div p > a[href="/"]:hover {
  background: var(--rb-page);
  color: var(--rb-blue);
}

html body a:focus-visible {
  outline: 2px solid var(--rb-focus) !important;
  outline-offset: 2px;
}