/* ================================================================
   PerfectEssayWriter.ai — Footer styles (scoped to .pewFoot-*)
   Loaded by shared/foot.php
   ================================================================ */

:root {
  --pewFoot-bg: #0A0A0F;
  --pewFoot-bg-soft: #13131C;
  --pewFoot-bg-card: #1A1A26;
  --pewFoot-text: #FFFFFF;
  --pewFoot-text-muted: #E2E2EE;
  --pewFoot-text-faint: #9898A8;
  --pewFoot-text-extra-faint: #707082;
  --pewFoot-border: rgba(255,255,255,0.08);
  --pewFoot-border-strong: rgba(255,255,255,0.16);
  --pewFoot-purple: #D306F4;
  --pewFoot-purple-light: #b44dff;
  --pewFoot-purple-dark: #5700E6;
  --pewFoot-purple-soft: rgba(211,6,244,0.08);
  --pewFoot-purple-border: rgba(211,6,244,0.32);
  --pewFoot-purple-glow: rgba(211,6,244,0.22);
  --pewFoot-yellow: #FACC15;
  --pewFoot-green: #4ADE80;
}

/* ============ Footer top ============ */
.pewFoot-top {
  padding: 56px 40px;
  background: var(--pewFoot-bg-soft);
  border-top: 1px solid var(--pewFoot-border);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--pewFoot-text);
}
.pewFoot-top-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap;
}

/* Brand column */
.pewFoot-brand { flex-shrink: 0; width: 220px; }
.pewFoot-logo { display: inline-block; margin-bottom: 12px; }
.pewFoot-logo img { display: block; max-width: 100%; height: auto; }
.pewFoot-logo:hover { opacity: .85; }
.pewFoot-tagline { font-size: 12.5px; color: var(--pewFoot-text-muted); line-height: 1.55; margin: 0 0 14px; }
.pewFoot-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.pewFoot-stars { color: var(--pewFoot-yellow); font-size: 12px; letter-spacing: 1px; }
.pewFoot-rating-text { font-size: 11.5px; color: var(--pewFoot-text-muted); }
.pewFoot-platforms { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.pewFoot-review-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pewFoot-bg-card); border: 1px solid var(--pewFoot-border);
  border-radius: 6px; padding: 4px 8px; transition: border-color .15s ease;
}
.pewFoot-review-badge:hover { border-color: var(--pewFoot-border-strong); }
.pewFoot-review-name { font-size: 10px; font-weight: 700; color: var(--pewFoot-text); }
.pewFoot-review-score { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 800; color: var(--pewFoot-yellow); }
.pewFoot-review-logo {
  height: 16px; width: auto; max-width: 72px;
  object-fit: contain; display: block; flex-shrink: 0;
}
/* Bark is a wordmark (wider than the icon-only logos) — give it more room */
.pewFoot-review-logo--invert {
  max-width: 38px;
  filter: brightness(0) invert(1);
}
/* SmartCustomer SVG ships with dark text on transparent — invert to white
   so it reads on the dark footer (Bark uses the modifier class above; we use
   an attribute selector here because we don't want to touch every footer
   that currently consumes this CSS file). */
.pewFoot-review-logo[src*="smartcustomer"] {
  filter: brightness(0) invert(1);
}

.pewFoot-socials { display: flex; flex-wrap: wrap; gap: 7px; }
.pewFoot-socials a {
  width: 32px; height: 32px;
  background: var(--pewFoot-bg-card);
  border: 1px solid var(--pewFoot-border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pewFoot-text-faint);
  text-decoration: none;
  transition: all .15s ease;
}
.pewFoot-socials a:hover {
  border-color: var(--pewFoot-purple-border);
  color: var(--pewFoot-purple-light);
  transform: translateY(-2px);
}
.pewFoot-socials a svg { display: block; }

/* ============ Link columns ============ */
.pewFoot-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 28px 20px;
}
.pewFoot-col { display: flex; flex-direction: column; gap: 7px; }
.pewFoot-col-title {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pewFoot-text);
  padding-bottom: 8px; border-bottom: 1px solid var(--pewFoot-border);
  margin-bottom: 2px;
}
.pewFoot-link {
  font-size: 12.5px; color: var(--pewFoot-text-muted);
  text-decoration: none;
  transition: color .15s ease; line-height: 1.35;
}
.pewFoot-link:hover { color: var(--pewFoot-text); }

/* ============ Footer bottom ============ */
.pewFoot-bottom {
  border-top: 1px solid var(--pewFoot-border);
  padding: 16px 40px;
  background: var(--pewFoot-bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.pewFoot-bottom-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.pewFoot-disclaimer {
  font-size: 11px; color: var(--pewFoot-text-faint);
  line-height: 1.5; max-width: 520px; margin: 0;
}
.pewFoot-bottom-right {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pewFoot-copy { font-size: 11.5px; color: var(--pewFoot-text-extra-faint); }
.pewFoot-legal-link {
  font-size: 11.5px; color: var(--pewFoot-text-faint);
  text-decoration: none; transition: color .15s ease;
}
.pewFoot-legal-link:hover { color: var(--pewFoot-text-muted); }
/* DMCA Protected badge — wraps the official dmca.webp image. The image itself
   carries the brand mark and shield, so we strip the border/text styling that
   used to wrap an inline SVG and just let the image stand on its own. */
.pewFoot-dmca {
  display: inline-flex; align-items: center;
  padding: 0; border: none; background: none;
  text-decoration: none; line-height: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.pewFoot-dmca:hover { opacity: 0.85; transform: translateY(-1px); }
.pewFoot-dmca img { display: block; height: 28px; width: auto; }

/* ============ Reveal animations ============ */
.pewFoot-top .anim-fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pewFoot-top .anim-fade-up.in-view {
  opacity: 1; transform: translateY(0);
}
.pewFoot-top .anim-stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pewFoot-top .anim-stagger.in-view > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0.05s; }
.pewFoot-top .anim-stagger.in-view > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: 0.12s; }
.pewFoot-top .anim-stagger.in-view > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: 0.19s; }
.pewFoot-top .anim-stagger.in-view > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: 0.26s; }
.pewFoot-top .anim-stagger.in-view > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: 0.33s; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .pewFoot-top { padding: 40px 20px; }
  .pewFoot-top-inner { flex-direction: column; gap: 32px; }
  .pewFoot-brand { width: 100%; }
  .pewFoot-bottom { padding: 16px 20px; }
  .pewFoot-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 600px) {
  .pewFoot-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pewFoot-top, .pewFoot-top *,
  .pewFoot-bottom, .pewFoot-bottom * {
    animation: none !important;
    transition: none !important;
  }
  .pewFoot-socials a:hover { transform: none !important; }
  .pewFoot-top .anim-fade-up,
  .pewFoot-top .anim-stagger > * {
    opacity: 1 !important; transform: none !important;
  }
}