/* Fonts showcase page theme — ported from the standalone dirdam.github.io
   fonts.html page. The 6 custom conlang/pictographic fonts it shows off are
   only ever used here, so their @font-face rules live in this page-scoped
   file rather than base.css (which only carries fonts every page pays for).
   Per-font accent colors below are lifted from the original page's carousel
   glow colors and each game's own palette, the same way apps-theme.css
   themes each My Apps card after its own app. */

@font-face {
  font-family: 'Sheikah';
  src: url('/assets/fonts/Sheikah.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Hylian';
  src: url('/assets/fonts/Hylian.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Gerudo';
  src: url('/assets/fonts/Gerudo.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Fez';
  src: url('/assets/fonts/Fez.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Tunic';
  src: url('/assets/fonts/Tunic.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Unown';
  src: url('/assets/fonts/Unown.otf') format('opentype');
  font-display: swap;
}

/* ---------- Font showcase cards ----------
   A 3-across grid (media on top, info below in each card) rather than
   games.html's single wide media-left/info-right row — with six fonts to
   show, a grid reads as a gallery instead of a long scroll.

   Each card's background is a slow-panning gradient built from that font's
   slice of the original carousel's colors (see .carousel-inner in the old
   dirdam.github.io/fonts.html) — the same hero-drift-base pan/keyframe the
   rest of the site already uses for its hero banners, so these read as
   "one more moving gradient on this site" rather than a one-off effect. */
.font-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-9);
  margin-bottom: var(--space-9);
}

@media (max-width: 900px) {
  .font-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .font-cards-grid { grid-template-columns: 1fr; }
}

.font-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-resting);
  background-color: var(--color-card-bg);
  background-size: 200% 200%;
  animation: hero-drift-base 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .font-card {
    animation: none;
    background-position: 30% 50%;
  }
}

.font-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.font-card-media img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}

.font-card-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Card content (title/credit/sample text) varies in length across fonts,
   which used to leave the button at a different height in every card —
   growing .font-card-info to fill the card and pinning the button to the
   bottom of it (rather than centering right after the content) keeps it
   at the same row position in every card regardless. */
.font-card-info .tool-button {
  margin-top: auto;
  align-self: center;
}

/* The franchise badge is now a link (to the game's own site), not just a
   label — reset the anchor's default underline and add a hover cue so it
   still reads as clickable without looking like body text. */
.font-card-info .badge {
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.font-card-info .badge:hover {
  opacity: 0.8;
}

.font-card-title {
  font-size: var(--font-size-card-title);
  font-weight: bold;
  margin-bottom: var(--space-3);
}

.font-card-credit {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* The font's own live sample now sits right before the download button,
   in a solid-white plate so the glyphs read clearly against the stripes
   behind it — the same role the original page's white bordered-image
   swatch played against its colorful carousel background. */
.font-sample {
  font-size: 1.3em;
  line-height: 1.45;
  letter-spacing: 0.03em;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-shadow: none;
  /* The original dirdam.github.io fonts page explicitly forced these on
     (its .description rule) — without them some browsers quietly disable
     the ligature substitutions these fonts rely on (most visibly Tunic,
     whose whole script is built out of GSUB "liga" letter-pair glyphs —
     see glyph-bg.js's own extraction notes on that same ligature table). */
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-feature-settings: "liga" 1, "dlig" 1;
}

.font-sample--sheikah { font-family: 'Sheikah', serif; }
.font-sample--hylian { font-family: 'Hylian', serif; }
.font-sample--gerudo { font-family: 'Gerudo', serif; }
.font-sample--fez { font-family: 'Fez', serif; }
.font-sample--unown { font-family: 'Unown', serif; }

/* Nonzero letter-spacing is itself enough to make some browsers suppress
   ligatures outright (spacing them apart would require reshaping the
   ligature, which they simply refuse to do) — Tunic needs its ligatures
   intact more than it needs the extra tracking every other font here
   just gets for free cosmetically, so it alone goes back to normal. */
.font-sample--tunic {
  font-family: 'Tunic', serif;
  letter-spacing: normal;
}

.font-card.sheikah {
  background-image: linear-gradient(120deg,
    rgba(100, 88, 80, 0.2),
    rgba(208, 171, 108, 0.2),
    rgba(109, 232, 243, 0.2),
    rgba(100, 88, 80, 0.2));
  border: 2px solid #12c8d9;
}
.font-card.sheikah .font-card-title { color: #0c838d; }
.font-card.sheikah .badge {
  background: rgba(18, 200, 217, 0.16);
  color: #0c838d;
  border-color: rgba(18, 200, 217, 0.4);
}

.font-card.hylian {
  background-image: linear-gradient(120deg,
    rgba(140, 120, 82, 0.2),
    rgba(193, 85, 82, 0.2),
    rgba(89, 139, 118, 0.2),
    rgba(140, 120, 82, 0.2));
  border: 2px solid #ad413e;
}
.font-card.hylian .font-card-title { color: #712a28; }
.font-card.hylian .badge {
  background: rgba(173, 65, 62, 0.16);
  color: #712a28;
  border-color: rgba(173, 65, 62, 0.4);
}

.font-card.gerudo {
  background-image: linear-gradient(120deg,
    rgba(244, 241, 109, 0.2),
    rgba(212, 142, 50, 0.2),
    rgba(214, 70, 48, 0.2),
    rgba(244, 241, 109, 0.2));
  border: 2px solid #c43c27;
}
.font-card.gerudo .font-card-title { color: #802719; }
.font-card.gerudo .badge {
  background: rgba(196, 60, 39, 0.16);
  color: #802719;
  border-color: rgba(196, 60, 39, 0.4);
}

.font-card.fez {
  background-image: linear-gradient(120deg,
    rgba(101, 197, 242, 0.2),
    rgba(111, 91, 167, 0.2),
    rgba(138, 221, 68, 0.2),
    rgba(242, 229, 95, 0.2));
  border: 2px solid #655299;
}
.font-card.fez .font-card-title { color: #423564; }
.font-card.fez .badge {
  background: rgba(101, 82, 153, 0.16);
  color: #423564;
  border-color: rgba(101, 82, 153, 0.4);
}

.font-card.tunic {
  background-image: linear-gradient(120deg,
    rgba(110, 116, 37, 0.2),
    rgba(245, 234, 91, 0.2),
    rgba(170, 123, 214, 0.2),
    rgba(110, 116, 37, 0.2));
  border: 2px solid #a9b239;
}
.font-card.tunic .font-card-title { color: #6e7425; }
.font-card.tunic .badge {
  background: rgba(169, 178, 57, 0.18);
  color: #6e7425;
  border-color: rgba(169, 178, 57, 0.4);
}

.font-card.unown {
  background-image: linear-gradient(120deg,
    rgba(48, 42, 43, 0.2),
    rgba(62, 136, 203, 0.2),
    rgba(152, 200, 150, 0.2),
    rgba(48, 42, 43, 0.2));
  border: 2px solid #3279b9;
}
.font-card.unown .font-card-title { color: #204f79; }
.font-card.unown .badge {
  background: rgba(50, 121, 185, 0.16);
  color: #204f79;
  border-color: rgba(50, 121, 185, 0.4);
}

/* ---------- "Who this is for" feature grid ----------
   Centered icon-circle + text, the same 56px badge-circle language as the
   shared .card-icon (contact/thanks pages), just three-across instead of
   one-per-card — reads as a proper feature row instead of a plain list. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-9);
  margin: var(--space-8) 0;
  text-align: center;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  margin-bottom: var(--space-5);
}

.feature-icon svg {
  width: 26px;
  height: 26px;
}

.feature-text {
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

/* ---------- Possibilities card grid ----------
   Same visual language as the site's own tools-grid/tool-card cards
   (rounded, shadowed, lift-on-hover) instead of a bordered table — a
   four-quadrant frame with gradient header bars read as a dull spec sheet,
   and those bars were styled identically to the "Get a quote" buttons
   right above/below, which made them look clickable when they aren't. The
   label here is a small muted caption instead, so it reads as a caption
   and nothing else. */
.possibilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-7);
  margin: var(--space-8) 0;
}

.possibility-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-resting);
  padding: var(--space-7);
  text-align: center;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.possibility-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.possibility-label {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
}

.possibility-card img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  margin: 0 auto;
}

/* ---------- Donate banner ----------
   A soft gold band (the original page's PayPal-gold) instead of a lone
   floating button, so the ask reads as a deliberate little section. */
.donate-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, rgba(246, 185, 59, 0.14) 0%, rgba(250, 211, 144, 0.14) 100%);
  border: 1px solid rgba(246, 185, 59, 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-9);
  margin-top: var(--space-9);
}

.donate-banner p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Warm PayPal-ish gold instead of the shared brand gradient — this is the
   one button on the site asking for something back from the visitor rather
   than sending them somewhere, so it deliberately reads differently. */
.btn-pill--donate {
  background: linear-gradient(135deg, #f6b93b 0%, #fad390 100%);
  color: #4a3200;
}

.btn-pill--donate:hover {
  opacity: 0.9;
}

.btn-pill--donate svg {
  width: 18px;
  height: 18px;
}