/* The greeting-card line's own look (loewenbuch.de /cards, a card's page, a card's order form).
 *
 * Linked by base.html ONLY on a page for which `card_section()` is true, and every rule is
 * scoped to `body.section-cards`, so a book page, the home page and every other shop are
 * untouched -- and a shop that sells no card never links the file at all.
 *
 * The same lion as the main shop, in another combination of ITS OWN colours. The mark
 * (`images/logo-loewenbuch-long.png`) is a yellow face in an orange mane over black
 * lettering. The book shop plays the cream paper, the navy ink and the yellow accent; the
 * cards play the warm half of the drawing instead:
 *
 *     the page      peach cream, the face's yellow washed into paper   #fff5ea
 *     the bands     the mane, washed back                               #ffe4c9
 *     the type      the lettering's black, kept warm                    #2b1810
 *     the accent    the mane's orange                                   #ff9f45
 *     the tones     face yellow, mane orange, mane red, a pale gold
 *     the dark band the lettering's brown-black, a step up from ink     #3b1a12
 *
 * It re-points the `--gk2-*` tokens, as theme-koala.css does, plus a few decorative rules
 * (a confetti band behind a shelf's heading, the tag beside the logo, a card that tilts a
 * little when you reach for it). Nothing in the layout moves.
 *
 * Measured against `--gk2-ink` (#2b1810): paper 15.7, band 13.9, card 16.9, accent 8.3,
 * accent-hover 6.8, yellow 11.9, orange 9.4, red 5.1, pale gold 14.1. `--gk2-ink-soft`
 * (#6a4b3c) is 7.3 on the paper and 6.4 on a band. Nothing in the repo checks a stylesheet:
 * re-measure by hand if a value moves.
 */

body.section-cards {
  --gk2-paper: #fff5ea;
  --gk2-paper-2: #ffe4c9;
  --gk2-ink: #2b1810;
  --gk2-ink-soft: #6a4b3c;
  --gk2-line: #f1d9c4;
  --gk2-sun: #ff9f45;
  --gk2-sun-deep: #f28a1e;
  --gk2-sky: #ffd35c;
  --gk2-leaf: #ffb067;
  --gk2-berry: #e9623a;
  --gk2-mint: #ffe8b3;
  --gk2-coral: #f47f55;
  --gk2-night: #3b1a12;
  --gk2-ink-rgb: 43 24 16;
  --gk2-sun-rgb: 255 159 69;
  --gk2-paper-rgb: 255 245 234;
  /* the ring and brackets drawn over a card's artwork: the face's yellow, which a mane-orange
     accent would swallow */
  --gk2-glow: #ffd35c;
  --gk2-glow-rgb: 255 211 92;
  /* the dark panel (a card's "look inside" reader) in the lettering's brown */
  --gk2-viewer: #4a2417;
  --gk2-viewer-deep: #34170f;
  --gk2-viewer-rgb: 52 23 15;
  /* a card stands on the accent, softened into the page */
  --gk2-mount: color-mix(in srgb, var(--gk2-sky) 55%, var(--gk2-paper));
  /* the two packages are two hues: the face's yellow and the mane's red */
  --gk2-level-1: var(--gk2-sky);
  --gk2-level-2: var(--gk2-berry);
  --gk2-level-3: var(--gk2-leaf);
}

/* The line's name, written on the logo: see the <svg class="logo-tag"> in base.html. It is laid
   over the wordmark in the drawing's own coordinates, so it sits above the lettering from the
   "n" to the "h" at any size. The mane's orange, with a hairline of the page's paper round it so
   it lifts off a pale page. */
.nav-logo--wordmark { position: relative; }

.nav-logo--wordmark .logo-tag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.nav-logo--wordmark .logo-tag text {
  fill: #ff6d00;
  stroke: var(--gk2-paper);
  stroke-width: 4px;
  paint-order: stroke fill;
  font-family: inherit;
  font-weight: 800;
  font-size: 42px;
  letter-spacing: 0.02em;
}

/* A confetti band behind the shelf's and the detail page's heading. Dots sit on the far side from the words; of the line's own
   tones, drawn in CSS so there is no picture to load, and kept to the heading so the cards
   themselves stay on a clean page. */
body.section-cards .alive-catalog__head,
body.section-cards .alive-carddetail .alive-head {
  position: relative;
  padding: clamp(20px, 3vw, 34px) clamp(16px, 3vw, 32px);
  margin-block-end: 22px;
  border-radius: 18px;
  background-color: var(--gk2-paper-2);
  background-image:
    radial-gradient(circle at 62% 24%, var(--gk2-sky) 0 7px, transparent 8px),
    radial-gradient(circle at 87% 20%, var(--gk2-berry) 0 6px, transparent 7px),
    radial-gradient(circle at 94% 70%, var(--gk2-sun) 0 9px, transparent 10px),
    radial-gradient(circle at 72% 78%, var(--gk2-coral) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 52%, var(--gk2-sky) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 50%, var(--gk2-sun) 0 4px, transparent 5px);
  overflow: hidden;
}

/* A card tilts a little when you reach for it, and the occasion chips are pills. */
body.section-cards .alive-card__front,
body.section-cards .alive-cardsband__card {
  border-radius: 4px 10px 10px 4px;
}

body.section-cards .alive-card:nth-child(odd) .alive-card__front:hover,
body.section-cards .alive-card:nth-child(odd) .alive-card__front:focus-visible {
  transform: translateY(-6px) rotate(-1.5deg);
}

body.section-cards .alive-card:nth-child(even) .alive-card__front:hover,
body.section-cards .alive-card:nth-child(even) .alive-card__front:focus-visible {
  transform: translateY(-6px) rotate(1.5deg);
}

body.section-cards .alive-chips a,
body.section-cards .alive-chips button {
  border-radius: 999px;
}

/* On a phone the words take the whole width, so the dots keep to the far corner. */
@media (max-width: 640px) {
  body.section-cards .alive-catalog__head,
  body.section-cards .alive-carddetail .alive-head {
    background-image:
      radial-gradient(circle at 96% 14%, var(--gk2-berry) 0 5px, transparent 6px),
      radial-gradient(circle at 92% 90%, var(--gk2-sun) 0 6px, transparent 7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.section-cards .alive-card__front { transition: none; }
  body.section-cards .alive-card:nth-child(odd) .alive-card__front:hover,
  body.section-cards .alive-card:nth-child(even) .alive-card__front:hover { transform: translateY(-6px); }
}