/* ============================================
   LUCKY PENNY — palette sampled from the book
   cover: indigo night sky, gold script + coins,
   magenta/violet wings, warm ember glow.
   ============================================ */

body.page-theme-penny {
  --penny-night: #241548;
  --penny-violet: #6f4bb6;
  --penny-orange: #c9601f;
  --penny-magenta: #c8347f;
  --penny-marigold: #f0b03e;
  --penny-cobalt: #3b2380;
  --penny-turquoise: #35a89a;
  --penny-cream: #fdf5e8;
  --penny-ink: #2a1a3f;

  --page-accent: var(--penny-magenta);
  --page-accent-soft: rgba(200, 52, 127, 0.16);
  --page-accent-on-light: var(--penny-magenta);
  --page-accent-hero-label: #ffe9b8;

  background-color: var(--penny-cream);
}

/* ---------- Papel picado banner ---------- */
.papel-banner {
  height: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cg%3E%3Cpath d='M0,0 H50 V26 L25,38 L0,26 Z' fill='%23c8347f'/%3E%3Ccircle cx='25' cy='12' r='5' fill='%23fdf5e8'/%3E%3Ccircle cx='13' cy='20' r='3' fill='%23fdf5e8'/%3E%3Ccircle cx='37' cy='20' r='3' fill='%23fdf5e8'/%3E%3Cpath d='M50,0 H100 V26 L75,38 L50,26 Z' fill='%23f0b03e'/%3E%3Ccircle cx='75' cy='13' r='5' fill='%23fdf5e8'/%3E%3Ccircle cx='63' cy='21' r='3' fill='%23fdf5e8'/%3E%3Ccircle cx='87' cy='21' r='3' fill='%23fdf5e8'/%3E%3Cpath d='M100,0 H150 V26 L125,38 L100,26 Z' fill='%233b2380'/%3E%3Ccircle cx='125' cy='13' r='5' fill='%23fdf5e8'/%3E%3Ccircle cx='113' cy='21' r='3' fill='%23fdf5e8'/%3E%3Ccircle cx='137' cy='21' r='3' fill='%23fdf5e8'/%3E%3Cpath d='M150,0 H200 V26 L175,38 L150,26 Z' fill='%236f4bb6'/%3E%3Ccircle cx='175' cy='13' r='5' fill='%23fdf5e8'/%3E%3Ccircle cx='163' cy='21' r='3' fill='%23fdf5e8'/%3E%3Ccircle cx='187' cy='21' r='3' fill='%23fdf5e8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 40px;
}

/* ---------- Hero ----------
   Coin field: a flat cream ground, a drift of coin outlines settling toward
   the bottom, and one hard-edged marigold disc behind the cover. Both
   decorative layers are pseudo-elements, so the hero markup stays clean. */
.penny-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--penny-cream);
}

/* The hill of pennies — densest along the bottom edge, faded out well before
   it reaches the title. */
.penny-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cg fill='none' stroke='%23c9601f' stroke-opacity='0.34'%3E%3Ccircle cx='19' cy='20' r='10' stroke-width='2'/%3E%3Ccircle cx='19' cy='20' r='5' stroke-width='1.3'/%3E%3Ccircle cx='57' cy='55' r='13' stroke-width='2'/%3E%3Ccircle cx='57' cy='55' r='6.5' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 76px 76px;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 42%, transparent 74%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 42%, transparent 74%);
}

/* Lifts the hero content above the coin field. */
.penny-hero > .container {
  position: relative;
  z-index: 1;
}

/* The marigold disc. Anchored to the container rather than the section edge
   so it keeps its place just outside the cover at every width — pinned to the
   viewport edge it would drift away from the cover on wide screens. */
.penny-hero > .container::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 4rem;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border-radius: 999px;
  background: #f7d089;
  pointer-events: none;
}

.penny-hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  /* Drops the cover and the title block clear of the disc's top edge. */
  margin-top: var(--space-8);
}

@media (min-width: 60em) {
  .penny-hero__inner {
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: var(--space-12);
  }
}

.penny-series {
  display: inline-block;
  font-family: var(--font-kids);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--penny-magenta);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--space-4);
}

.penny-title {
  color: var(--penny-orange);
  margin-bottom: var(--space-2);
}

.penny-subtitle {
  font-family: var(--font-kids);
  font-size: var(--text-lg);
  color: var(--penny-cobalt);
  margin-bottom: var(--space-4);
}

.penny-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.penny-badge {
  font-family: var(--font-kids);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  color: var(--penny-ink);
}

.penny-badge--ages { background: rgba(240, 176, 62, 0.45); }
.penny-badge--bilingual { background: rgba(53, 168, 154, 0.28); }
.penny-badge--dia { background: rgba(111, 75, 182, 0.2); }

/* ---------- Cover / art placeholder ---------- */
.penny-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(36, 21, 72, 0.3);
  transform: rotate(-2deg);
  background: #fff;
  width: 100%;
  max-width: 320px;
  justify-self: start;
}

.penny-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-2);
  text-align: center;
  aspect-ratio: 2 / 3;
  padding: var(--space-6);
  border: 3px dashed var(--penny-magenta);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(240, 176, 62, 0.16) 0 12px,
      rgba(253, 245, 232, 0.9) 12px 24px
    );
  color: var(--penny-ink);
  font-family: var(--font-kids);
}

.art-placeholder__title {
  font-weight: 700;
  font-size: var(--text-lg);
}

.art-placeholder__hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--burgundy-warm);
  max-width: 22ch;
  margin-inline: auto;
}

.art-placeholder--wide {
  aspect-ratio: 4 / 3;
}

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: rgba(42, 26, 63, 0.08);
  border-radius: 999px;
  margin-bottom: var(--space-4);
}

.lang-toggle__btn {
  font-family: var(--font-kids);
  font-size: var(--text-sm);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  background: transparent;
  color: var(--penny-ink);
  transition: background var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
}

.lang-toggle__btn:hover {
  background: rgba(200, 52, 127, 0.14);
}

.lang-toggle__btn[aria-selected='true'] {
  background: var(--penny-magenta);
  color: #fff;
}

.lang-panel[hidden] {
  display: none;
}

.penny-synopsis {
  font-size: var(--text-base);
  color: var(--penny-ink);
  max-width: 60ch;
  /* Match the gap other book pages put between synopsis and "Get Your Copy" */
  margin-bottom: var(--space-8);
}

.penny-synopsis p + p {
  margin-top: var(--space-4);
}

/* ---------- Illustrations grid + click-to-enlarge lightbox ---------- */
/* Justified rows, the way a photo wall is hung: every tile in a row shares
   one height, and widths run in proportion to each picture's own aspect
   ratio (--ar), so the row fills edge to edge with nothing cropped. Basis
   AND grow both scale with --ar — that is what keeps the heights equal:
   width ends up ar x k for every tile in the row, so height = k. */
.penny-art-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Soaks up the leftover width on the final row so one lonely picture
   doesn't balloon to full-bleed. */
.penny-art-grid::after {
  content: "";
  flex: 1000 1 0;
  height: 0;
  align-self: flex-start;
}

.penny-art-thumb {
  --ar: 1;
  display: block;
  flex: var(--ar) 1 calc(var(--ar) * 13rem);
  min-width: 0;
  padding: 0;
  border: 0;
  background: rgba(58, 31, 43, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.penny-art-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
}

.penny-art-thumb:hover,
.penny-art-thumb:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 28px -12px rgba(36, 21, 72, 0.42);
}

/* Don't set `position` here. The UA gives dialog:modal position:fixed with
   inset:0 + margin:auto — that pair is what centres a modal. Overriding it
   drops the dialog back into normal flow (pinned top-left, and the page
   jumps to scroll it into view). position:fixed already anchors the
   absolutely-positioned close button, so `relative` bought nothing. */
.art-lightbox {
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 60rem);
  max-height: 92vh;
  overflow: visible;
}

.art-lightbox::backdrop {
  background: rgba(36, 21, 72, 0.82);
  backdrop-filter: blur(3px);
}

.art-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 60rem);
  max-height: 92vh;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--penny-cream, #fdf5e8);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Both stay hidden until the picture has actually decoded, otherwise the close
   button paints instantly while the image is still blank. JS adds .is-ready. */
.art-lightbox__img,
.art-lightbox__close {
  opacity: 0;
}

.art-lightbox.is-ready .art-lightbox__img,
.art-lightbox.is-ready .art-lightbox__close {
  opacity: 1;
}

.art-lightbox.is-ready .art-lightbox__img {
  animation: art-zoom-in 260ms var(--ease-bounce) both;
}

/* trails the picture slightly so it reads as landing on top of it */
.art-lightbox.is-ready .art-lightbox__close {
  animation: art-fade-in 220ms var(--ease-smooth) 140ms both;
}

@keyframes art-zoom-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes art-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.art-lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: var(--penny-magenta, #c8347f);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-bounce);
}

.art-lightbox__close:hover,
.art-lightbox__close:focus-visible {
  background: var(--penny-orange, #c9601f);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .penny-art-thumb:hover,
  .penny-art-thumb:focus-visible { transform: none; }
  .art-lightbox.is-ready .art-lightbox__img,
  .art-lightbox.is-ready .art-lightbox__close { animation: none; opacity: 1; }
  .art-lightbox__close:hover,
  .art-lightbox__close:focus-visible { transform: none; }
}

/* ---------- Bright section bands ---------- */
.penny-band-marigold {
  background: linear-gradient(180deg, rgba(240, 176, 62, 0.32), rgba(253, 245, 232, 1));
}

.penny-band-cobalt {
  background: var(--penny-cobalt);
  color: #fdf5e8;
}

.penny-band-cobalt h2,
.penny-band-cobalt h3 {
  color: #fdf5e8;
}

.penny-band-cobalt p {
  color: rgba(253, 245, 232, 0.88);
}

/* ---------- Themes / callouts ---------- */
.penny-theme-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 48em) {
  .penny-theme-grid { grid-template-columns: repeat(3, 1fr); }
}

.penny-theme-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border-top: 7px solid var(--penny-marigold);
}

.penny-theme-card:nth-child(2) { border-top-color: var(--penny-magenta); }
.penny-theme-card:nth-child(3) { border-top-color: var(--penny-violet); }

.penny-theme-card h3 {
  font-family: var(--font-kids);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--penny-ink);
}

.penny-theme-card p {
  font-size: var(--text-sm);
  color: var(--burgundy-warm);
}

.penny-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-kids);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  background: var(--penny-magenta);
  color: #fff;
  transition: background var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-bounce);
}

.penny-cta:hover {
  background: var(--penny-orange);
  color: #fff;
  transform: translateY(-2px);
}

.penny-cta--ghost {
  background: transparent;
  color: var(--penny-cobalt);
  box-shadow: inset 0 0 0 2px var(--penny-cobalt);
}

.penny-cta--ghost:hover {
  background: rgba(59, 35, 128, 0.1);
  color: var(--penny-cobalt);
}


/* ============================================
   PENNY'S CORNER — the Kids Zone block.
   Self-scoped so it works on any page.
   ============================================ */

.penny-corner {
  --penny-night: #241548;
  --penny-violet: #6f4bb6;
  --penny-orange: #c9601f;
  --penny-magenta: #c8347f;
  --penny-marigold: #f0b03e;
  --penny-cobalt: #3b2380;
  --penny-turquoise: #35a89a;
  --penny-cream: #fdf5e8;
  --penny-ink: #2a1a3f;
  background:
    radial-gradient(circle at 92% 8%, rgba(240, 176, 62, 0.4) 0%, transparent 44%),
    radial-gradient(circle at 4% 92%, rgba(111, 75, 182, 0.24) 0%, transparent 40%),
    var(--penny-cream);
  color: var(--penny-ink);
}

.penny-corner h2,
.penny-corner h3 { color: var(--penny-ink); }

.penny-corner .penny-corner__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--penny-orange);
}

.penny-corner__lede {
  font-family: var(--font-kids);
  font-size: var(--text-lg);
  color: var(--penny-cobalt);
  max-width: 52ch;
}

.penny-corner__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (min-width: 48em) {
  .penny-corner__grid { grid-template-columns: repeat(3, 1fr); }
}

.word-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-bottom: 8px solid var(--penny-marigold);
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.word-card:nth-child(2) { border-bottom-color: var(--penny-magenta); }
.word-card:nth-child(3) { border-bottom-color: var(--penny-violet); }
.word-card:nth-child(4) { border-bottom-color: var(--penny-cobalt); }
.word-card:nth-child(5) { border-bottom-color: var(--penny-orange); }
.word-card:nth-child(6) { border-bottom-color: var(--penny-turquoise); }

.word-card:hover { transform: translateY(-5px) rotate(-1.2deg); }

.word-card__emoji {
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}

.word-card__word {
  font-family: var(--font-kids);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--penny-ink);
}

.penny-corner__soon {
  margin-top: var(--space-8);
  background: rgba(255, 255, 255, 0.72);
  border: 3px dashed var(--penny-magenta);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 46rem;
}

.penny-corner__soon h3 {
  font-family: var(--font-kids);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .word-card:hover { transform: none; }
}

/* Small placeholder used in book shelves and mini cards */
.art-placeholder--thumb {
  aspect-ratio: 2 / 3;
  max-height: 9rem;
  padding: var(--space-3);
  border-width: 2px;
  margin-bottom: var(--space-3);
}

.art-placeholder--thumb .art-placeholder__title { font-size: var(--text-base); }

/* Homepage new-book band */
.penny-strip {
  --penny-night: #241548;
  --penny-violet: #6f4bb6;
  --penny-orange: #c9601f;
  --penny-magenta: #c8347f;
  --penny-marigold: #f0b03e;
  --penny-cobalt: #3b2380;
  --penny-cream: #fdf5e8;
  --penny-ink: #2a1a3f;
  background:
    radial-gradient(circle at 90% 15%, rgba(240, 176, 62, 0.42) 0%, transparent 46%),
    radial-gradient(circle at 8% 85%, rgba(111, 75, 182, 0.22) 0%, transparent 42%),
    var(--penny-cream);
  color: var(--penny-ink);
}

.penny-strip__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 52em) {
  .penny-strip__inner { grid-template-columns: minmax(11rem, 15rem) 1fr; gap: var(--space-10); }
}

.penny-strip h2 {
  font-size: var(--text-2xl);
  color: var(--penny-orange);
  margin-bottom: var(--space-3);
}

.penny-strip p { color: var(--penny-ink); max-width: 54ch; }

.penny-strip__kicker {
  display: inline-block;
  font-family: var(--font-kids);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--penny-magenta);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: var(--space-4);
}