/* =====================================================
   Vicarion — Footer (glass, premium gold) · v3.1
   - Full-width glass footer with subtle top glow
   - Crisp brand lockup (logo + name)
   - Accessible links/focus, responsive spacing
   - Light-mode support
   ===================================================== */

/* ----- Design tokens (safe defaults if not already set) ----- */
:root{
  --gold: #ffc107;
  --gold-deep: #ffb300;
  --gold-soft: #ffe082;
  --glass: rgba(0,0,0,.68);
  --glass-light: rgba(255,255,255,.65);
  --ring: rgba(255,255,255,.12);
}

/* ==================== FOOTER WRAPPER ==================== */
.footer-glass{
  position: relative;
  width: 100%;
  color: #fff;
  background: var(--glass);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px); /* Safari */
  border-top: 1px solid var(--ring);
  box-shadow: 0 -10px 24px rgba(0,0,0,.35);
  padding-block: clamp(28px, 5vw, 48px);
  text-align: center;
  isolation: isolate; /* keep glow layers behind content */
}

/* Subtle golden glow bar at top */
.footer-glass::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:10px;
  background: linear-gradient(to bottom,
              rgba(255,193,7,.45),
              rgba(255,193,7,.18),
              transparent 70%);
  filter: blur(6px);
  pointer-events:none;
  z-index:0;
}

/* Edge vignette to keep focus on center (very subtle) */
.footer-glass::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 40px 80px rgba(0,0,0,.22);
  pointer-events:none;
  z-index:0;
}

/* ==================== CONTENT ==================== */
.footer-content{
  width: min(92%, 1200px);
  margin-inline: auto;
  row-gap: .35rem; /* complements Bootstrap flex-column */
  position: relative;
  z-index: 1; /* above glow layers */
}

/* Brand lockup */
.footer-brand{
  gap: .6rem; /* aligns with your header spacing */
}
.footer-logo{
  max-width: 96px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 2px 10px rgba(255,193,7,.45));
  transition: transform .2s ease, filter .2s ease;
}
.footer-logo:hover{
  transform: scale(1.06);
  filter: drop-shadow(0 4px 14px rgba(255,193,7,.65));
}

/* Brand name (uses Cinzel like header) */
.footer-brand-name{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255,193,7,.35);
}

/* ==================== LINKS ==================== */
.footer-content ul{
  list-style: none;
  padding: 0;
  margin: 18px 0 10px;
}
.footer-content li{
  display: inline-block;
  margin: 0 10px;
}

.footer-content a{
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  opacity: .95;
  transition: filter .2s ease, text-shadow .2s ease, opacity .2s ease;
}
.footer-content a:hover{
  filter: brightness(1.06);
  text-shadow: 0 0 10px rgba(255,193,7,.65);
}
.footer-content a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ==================== COPYRIGHT ==================== */
.footer-content p{
  font-size: .93rem;
  color: #bdbdbd;
  margin-top: 10px;
}

/* ==================== LIGHT MODE ==================== */
body.light-mode .footer-glass{
  color: #0f0f0f;
  background: var(--glass-light);
  border-top: 1px solid rgba(0,0,0,.08);
}
body.light-mode .footer-brand-name{
  text-shadow: 0 0 6px rgba(255,193,7,.25);
}
body.light-mode .footer-content p{
  color: #444;
}

/* ==================== SMALL SCREENS ==================== */
@media (max-width: 576px){
  .footer-logo{ max-width: 84px; }
  .footer-content li{ margin: 0 8px; }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}