/* ─────────────────────────────────────────
   FOOTER COMPONENT
   Shared across all pages
───────────────────────────────────────── */
/* Prevent horizontal overflow expanding viewport on mobile Safari */
html { overflow-x: clip; }

/* Screen reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute; top: -9999px; left: 1rem;
  background: var(--ember, #c0390a); color: #fff;
  padding: 0.75rem 1.5rem; z-index: 999999;
  font-family: 'Roboto Mono', monospace; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }
/* Required for footer parallax reveal */
main { overflow: clip; }

.footer-wrap {
  position: relative;
  overflow: hidden;
}
.footer-wrap__dark {
  opacity: 0;
  pointer-events: none;
  background-color: var(--void);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.site-footer {
  background: var(--parch);
  border-top: 1.5px solid rgba(24,12,4,0.12);
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer-logo { text-align: center; padding: 48px 48px 0; margin-bottom: 40px; }
.footer-logo img { height: 52px; width: auto; }
.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  width: 100%;
  max-width: 1400px; margin: 0 auto;
  padding: 32px 48px 32px;
  position: relative;
}
/* Top + bottom horizontal lines — from center outward */
.footer-grid::before {
  content: ''; position: absolute;
  top: 0; left: 40px; right: 40px; bottom: 0;
  border-top: 1.2px solid var(--honey);
  border-bottom: 1.2px solid var(--honey);
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.2s cubic-bezier(0.25,0,0,1);
  pointer-events: none;
}
/* Vertical dividers at 1/3 and 2/3 — from center outward */
.footer-grid::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background:
    linear-gradient(var(--honey), var(--honey)) calc(100% / 3) 0 / 1.2px 100% no-repeat,
    linear-gradient(var(--honey), var(--honey)) calc(200% / 3) 0 / 1.2px 100% no-repeat;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 1.2s cubic-bezier(0.25,0,0,1) 0.45s;
  pointer-events: none;
}
.site-footer.is-active .footer-grid::before {
  clip-path: inset(0 0 0 0);
}
.site-footer.is-active .footer-grid::after {
  clip-path: inset(0 0 0 0);
}
.footer-col { display: flex; flex-direction: column; gap: 0; align-items: center; text-align: center; font-size: 150%; padding: 24px 20px; justify-content: center; height: 100%; }
.footer-nav {
  list-style: none;
  font-family: var(--f-banner); font-weight: 800; font-size: 18px;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; flex-direction: column; gap: 30px;
}
.footer-nav a { color: var(--void); text-decoration: none; transition: color 0.15s; }
.footer-nav a:hover { color: var(--ember); }
.footer-nav a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.footer-contact-block { display: flex; flex-direction: column; gap: 30px; color: rgba(14,11,8,0.65); }
.footer-contact-block strong {
  font-family: var(--f-banner); font-weight: 800; font-size: 18px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--void);
}
.footer-contact-block a { color: rgba(14,11,8,0.65); text-decoration: none; transition: color 0.15s; }
.footer-contact-block a:hover { color: var(--ember); }
.footer-contact-block a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.footer-social {
  list-style: none;
  display: flex; flex-direction: column; gap: 30px; align-items: center;
}
.footer-social a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-banner); font-weight: 800; font-size: 18px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--void); text-decoration: none; transition: color 0.15s;
}
.footer-social a:hover { color: var(--ember); }
.footer-social a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.footer-social svg { width: 25px; height: 25px; fill: currentColor; }
.footer-sister {
  font-family: var(--f-label); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(14,11,8,0.30); text-align: center; padding: 24px 48px 0;
  width: 100%; max-width: 1400px;
}
.footer-sister a { color: rgba(14,11,8,0.40); text-decoration: underline; }
.footer-sister a:hover { color: var(--ember); }

.footer-copy {
  font-family: var(--f-label); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(14,11,8,0.35); padding: 8px 48px 48px; text-align: center;
  width: 100%; max-width: 1400px;
}

/* Footer corner cogs — inside the animated line corners */
.footer-cog {
  position: absolute;
  width: clamp(60px, 8vw, 100px);
  height: auto;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}
.footer-cog--tl { top: 4px; left: 40px; transform: scaleX(-1); }
.footer-cog--tr { top: 4px; right: 40px; }
.footer-cog--bl { bottom: 4px; left: 40px; transform: scale(-1); }
.footer-cog--br { bottom: 4px; right: 40px; transform: scaleY(-1); }

/* Responsive */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; position: static; }
  .footer-social a { flex-direction: row; }

  /* Hide vertical dividers — no columns to divide */
  .footer-grid::after { display: none; }

  /* Repurpose horizontal lines as row separators */
  .footer-grid::before { display: none; }

  .footer-col {
    padding: 32px 20px;
    border-top: 1.2px solid var(--honey);
  }

  .footer-col:last-child {
    border-bottom: 1.2px solid var(--honey);
  }
}
@media (max-width: 768px) {
  .footer-grid { padding: 32px 20px; }
  .footer-logo { padding: 36px 20px 0; margin-bottom: 28px; }
  .footer-copy { padding: 20px 20px 36px; }

  /* Disable parallax on mobile, make footer the cog positioning parent */
  .site-footer {
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transform: none !important;
    position: relative;
  }

  /* Move cogs to section corners on mobile */
  .footer-cog--tl { top: 8px; left: 8px; }
  .footer-cog--tr { top: 8px; right: 8px; }
  .footer-cog--bl { bottom: 8px; left: 8px; }
  .footer-cog--br { bottom: 8px; right: 8px; }
}