/* ==========================================================================
   eLibrary Africa — Signature Material Layer
   --------------------------------------------------------------------------
   A shared, page-agnostic layer of recurring surface details — dot-grid
   material, watermark monogram, folded-corner motif, card hover-lift,
   editorial type — applied on top of each page's own styles. Pages keep
   their own --primary/--accent/--green/--red tokens; this file only adds
   reusable classes via background/pseudo-elements, it never sets layout.
   Apply the "surface" classes to entire sections (nav, hero, alternating
   content sections, footer) so the material reads as the site's actual
   skin, not a one-off decoration.
   ========================================================================== */

/* ── Dot-grid surface material ─────────────────────────────────────────── */
/* For light/white surfaces (nav, .section-alt, cards): tinted navy dots.
   `isolation: isolate` (not z-index:0) creates the stacking context the
   ::before pseudo needs, without overriding a host's own z-index — e.g.
   .nav sets z-index:200 inline; a z-index:0 here would clobber that and
   let later same-z-index sections paint over the nav, burying the mega
   menu underneath the page. */
.dot-grid { position: relative; isolation: isolate; }
.dot-grid::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(10, 35, 66, .09) 1px, transparent 1.6px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
}
/* For dark/navy surfaces (.hero, .section-dark, .cta-section, footer): pale dots. */
.dot-grid-dark::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.6px);
}

/* ── Watermark monogram ────────────────────────────────────────────────── */
/* Bleeds an oversized, near-invisible glyph off one edge of a section —
   the "you've arrived somewhere specific" signature, used sparingly. */
.watermark { position: relative; isolation: isolate; overflow: hidden; }
.watermark::after {
  content: '📖';
  position: absolute;
  right: -3%; bottom: -12%;
  font-size: min(34vw, 420px);
  line-height: 1;
  opacity: .05;
  filter: grayscale(1) brightness(1.6);
  pointer-events: none;
  z-index: -1;
  transform: rotate(-6deg);
}
.watermark-light::after { filter: grayscale(1) brightness(.3); opacity: .04; }

/* ── Folded-corner motif (book-cover cue) ──────────────────────────────── */
.corner-fold { position: relative; overflow: hidden; }
.corner-fold::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 16px 16px 0 0;
  border-color: var(--accent, #F4A800) transparent transparent transparent;
  opacity: .55;
}

/* ── Card hover-lift (any clickable tile: book, stat, profile, plan) ──── */
.lift-card,
.offer-card, .country-card, .testi-card, .blog-card, .mvv-card,
.book-card, .book-card-wide, .stat-card, .plan-card {
  transition: transform .22s ease, box-shadow .22s ease;
}
.lift-card:hover,
.offer-card:hover, .country-card:hover, .testi-card:hover, .blog-card:hover, .mvv-card:hover,
.book-card:hover, .book-card-wide:hover, .stat-card:hover, .plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(10, 35, 66, .16);
}
@media (prefers-reduced-motion: reduce) {
  .lift-card, .offer-card, .country-card, .testi-card, .blog-card, .mvv-card,
  .book-card, .book-card-wide, .stat-card, .plan-card { transition: none; }
  .lift-card:hover, .offer-card:hover, .country-card:hover, .testi-card:hover,
  .blog-card:hover, .mvv-card:hover, .book-card:hover, .book-card-wide:hover,
  .stat-card:hover, .plan-card:hover { transform: none; }
}

/* ── Editorial type accent ─────────────────────────────────────────────── */
.editorial-head {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: .2px;
}