/* ==========================================================================
   footer.css — Site footer
   --------------------------------------------------------------------------
   Project:   Kali Villas Mentawai
   Layer:     Components (ITCSS)
   Loaded by: All HTML pages
   --------------------------------------------------------------------------
   Three columns at desktop:
     1. Brand mark (left)
     2. Copyright line (centre)
     3. Quick navigation links (right)
   On mobile (< 900px) it stacks into a single centred column and the
   secondary links are hidden.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 4rem;
  background: var(--navy);
  border-top: 0.5px solid rgba(245, 239, 227, 0.08);
}


/* --------------------------------------------------------------------------
   Footer brand mark — softer, smaller version of the nav logo
   -------------------------------------------------------------------------- */
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.72);
}


/* --------------------------------------------------------------------------
   Copyright line — minimal, centred
   -------------------------------------------------------------------------- */
.footer-copy {
  font-size: 0.7rem;
  font-weight: 300;
  color: rgba(245, 239, 227, 0.55);
}


/* --------------------------------------------------------------------------
   Footer link list
   -------------------------------------------------------------------------- */
.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.footer-links a {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.65);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover {
  color: rgba(245, 239, 227, 0.85);
}


/* --------------------------------------------------------------------------
   Mobile — stack vertically and hide secondary links
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  footer {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.25rem 1.75rem;
    text-align: center;
  }
  .footer-links {
    display: none;
  }
}