/* ════════════════════════════════════════════════════════
   RadheShyam Official  |  footer.css
   Class prefix: zkm-   (collision-safe, shares navbar tokens)
   Paste AFTER footer-animations.css
   ════════════════════════════════════════════════════════ */

/* ── ROOT TOKENS (safe to duplicate — same values as navbar.css) ── */
:root {
  --zkm-ink:        #0b0705;
  --zkm-nav-bg:     rgba(11, 7, 5, 0.96);
  --zkm-gold:       #e8a820;
  --zkm-gold-lt:    #f5d485;
  --zkm-gold-dk:    #c47d0e;
  --zkm-gold-mid:   #c9a84c;
  --zkm-cream:      #f0e6d0;
  --zkm-cream-dim:  #b8a882;
  --zkm-muted:      #6b5c45;
  --zkm-drop-bg:    rgba(14, 9, 6, 0.97);
  --zkm-border:     rgba(232, 168, 32, 0.18);
  --zkm-glow:       rgba(232, 168, 32, 0.22);

  --zkm-ff-logo:    'Cinzel Decorative', serif;
  --zkm-ff-nav:     'Playfair Display', serif;
  --zkm-ff-drop:    'Crimson Pro', serif;
  --zkm-ff-accent:  'IM Fell English', serif;

  --zkm-radius:     3px;
  --zkm-trans:      0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── BASE RESET (scoped) ──────────────────────────────── */
.zkm-footer *, .zkm-footer *::before, .zkm-footer *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

/* ══════════════════════════════════════════════════════ */
/*  FOOTER SHELL                                          */
/* ══════════════════════════════════════════════════════ */
.zkm-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--zkm-ink) 0%, #060302 100%);
  isolation: isolate;
}

/* Gold top border — mirrors header's bottom border */
.zkm-footer-border-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--zkm-gold-dk) 20%,
    var(--zkm-gold-lt) 50%,
    var(--zkm-gold-dk) 80%,
    transparent 100%);
  opacity: 0.55;
  z-index: 3;
}

/* Canvas background — runs continuously, never hover-gated */
.zkm-footer-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* Settling-words layer */
.zkm-footer-floating-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════ */
/*  INNER WRAPPER                                         */
/* ══════════════════════════════════════════════════════ */
.zkm-footer-inner {
  position: relative;
  z-index: 10;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 40px);
}

/* ══════════════════════════════════════════════════════ */
/*  GRID — 4 COLUMNS                                      */
/* ══════════════════════════════════════════════════════ */
.zkm-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr 0.85fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
}

.zkm-footer-col { min-width: 0; }

/* ── Brand column ──────────────────────────────────────── */
.zkm-footer-logo-link {
  display: inline-block;
  text-decoration: none;
}

.zkm-footer-logo-svg {
  width: clamp(180px, 20vw, 240px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(232,168,32,0.28));
}

.zkm-footer-tagline {
  margin-top: 18px;
  font-family: var(--zkm-ff-accent);
  font-size: 15px;
  font-style: italic;
  color: var(--zkm-gold-mid);
  letter-spacing: 0.02em;
  max-width: 34ch;
}

.zkm-footer-about {
  margin-top: 14px;
  font-family: var(--zkm-ff-drop);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zkm-cream-dim);
  max-width: 40ch;
}

.zkm-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.zkm-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--zkm-border);
  border-radius: 50%;
  color: var(--zkm-gold-mid);
  transition: color var(--zkm-trans), border-color var(--zkm-trans),
              box-shadow var(--zkm-trans), transform var(--zkm-trans);
}

.zkm-social-link svg {
  width: 16px; height: 16px;
}

.zkm-social-link:hover,
.zkm-social-link:focus-visible {
  color: var(--zkm-gold-lt);
  border-color: var(--zkm-gold);
  box-shadow: 0 0 14px var(--zkm-glow);
  transform: translateY(-2px);
}

/* ── Link columns ──────────────────────────────────────── */
.zkm-footer-heading {
  font-family: var(--zkm-ff-nav);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zkm-gold);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.zkm-footer-heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 1px;
  background: var(--zkm-gold-dk);
  opacity: 0.7;
}

.zkm-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zkm-footer-links a {
  font-family: var(--zkm-ff-drop);
  font-size: 14.5px;
  color: var(--zkm-cream-dim);
  text-decoration: none;
  position: relative;
  transition: color var(--zkm-trans), padding-left var(--zkm-trans);
}

.zkm-footer-links a::before {
  content: '◈';
  position: absolute;
  left: -16px; top: 1px;
  font-size: 8px;
  color: var(--zkm-gold-dk);
  opacity: 0;
  transition: opacity var(--zkm-trans);
}

.zkm-footer-links a:hover,
.zkm-footer-links a:focus-visible {
  color: var(--zkm-gold-lt);
  padding-left: 16px;
}

.zkm-footer-links a:hover::before,
.zkm-footer-links a:focus-visible::before {
  opacity: 1;
}

/* ── Newsletter column ─────────────────────────────────── */
.zkm-footer-newsletter-text {
  font-family: var(--zkm-ff-drop);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zkm-cream-dim);
  margin-bottom: 20px;
  max-width: 32ch;
}

.zkm-newsletter-input-wrap {
  display: flex;
  border: 1px solid var(--zkm-border);
  border-radius: var(--zkm-radius);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: border-color var(--zkm-trans), box-shadow var(--zkm-trans);
}

.zkm-newsletter-input-wrap:focus-within {
  border-color: var(--zkm-gold);
  box-shadow: 0 0 0 3px rgba(232,168,32,0.1);
}

.zkm-newsletter-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-family: var(--zkm-ff-drop);
  font-size: 14px;
  color: var(--zkm-cream);
}

.zkm-newsletter-input::placeholder {
  color: var(--zkm-muted);
}

.zkm-newsletter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: rgba(232,168,32,0.08);
  border: none;
  border-left: 1px solid var(--zkm-border);
  color: var(--zkm-gold);
  font-family: var(--zkm-ff-nav);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--zkm-trans), color var(--zkm-trans);
}

.zkm-newsletter-btn:hover,
.zkm-newsletter-btn:focus-visible {
  background: rgba(232,168,32,0.18);
  color: var(--zkm-gold-lt);
}

.zkm-newsletter-arrow {
  transition: transform var(--zkm-trans);
}

.zkm-newsletter-btn:hover .zkm-newsletter-arrow {
  transform: translateX(3px);
}

.zkm-newsletter-msg {
  margin-top: 10px;
  min-height: 18px;
  font-family: var(--zkm-ff-accent);
  font-size: 13px;
  font-style: italic;
  color: var(--zkm-gold-mid);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--zkm-trans), transform var(--zkm-trans);
}

.zkm-newsletter-msg.zkm-show {
  opacity: 1;
  transform: translateY(0);
}

.zkm-newsletter-msg.zkm-error {
  color: #d97a6b;
}

/* ══════════════════════════════════════════════════════ */
/*  DIVIDER                                                */
/* ══════════════════════════════════════════════════════ */
.zkm-footer-divider {
  height: 1px;
  margin: clamp(32px, 5vw, 48px) 0 24px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--zkm-border) 15%,
    var(--zkm-border) 85%,
    transparent 100%);
}

/* ══════════════════════════════════════════════════════ */
/*  BOTTOM BAR                                             */
/* ══════════════════════════════════════════════════════ */
.zkm-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.zkm-footer-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--zkm-ff-drop);
  font-size: 13px;
  color: var(--zkm-muted);
}

.zkm-footer-seal {
  color: var(--zkm-gold-dk);
  font-size: 11px;
}

.zkm-footer-legal {
  display: flex;
  gap: 22px;
  list-style: none;
}

.zkm-footer-legal a {
  font-family: var(--zkm-ff-drop);
  font-size: 13px;
  color: var(--zkm-cream-dim);
  text-decoration: none;
  transition: color var(--zkm-trans);
}

.zkm-footer-legal a:hover,
.zkm-footer-legal a:focus-visible {
  color: var(--zkm-gold-lt);
}

.zkm-footer-signature {
  font-family: var(--zkm-ff-accent);
  font-size: 13px;
  font-style: italic;
  color: var(--zkm-gold-mid);
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════ */
/*  BACK TO TOP                                            */
/* ══════════════════════════════════════════════════════ */
.zkm-back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--zkm-drop-bg);
  border: 1px solid var(--zkm-border);
  color: var(--zkm-gold);
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--zkm-trans), transform var(--zkm-trans),
              visibility 0s linear 0.28s, border-color var(--zkm-trans),
              box-shadow var(--zkm-trans);
}

.zkm-back-to-top.zkm-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--zkm-trans), transform var(--zkm-trans),
              visibility 0s linear 0s, border-color var(--zkm-trans),
              box-shadow var(--zkm-trans);
}

.zkm-back-to-top:hover,
.zkm-back-to-top:focus-visible {
  border-color: var(--zkm-gold);
  box-shadow: 0 0 16px var(--zkm-glow);
}

.zkm-back-to-top svg {
  width: 18px; height: 18px;
}

/* ══════════════════════════════════════════════════════ */
/*  RESPONSIVE                                             */
/* ══════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .zkm-footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .zkm-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .zkm-footer-grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .zkm-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .zkm-newsletter-input-wrap {
    flex-direction: column;
  }
  .zkm-newsletter-btn {
    border-left: none;
    border-top: 1px solid var(--zkm-border);
    justify-content: center;
    padding: 12px 16px;
  }
}