/**
 * @file
 * Footer styles for the republica FL theme.
 *
 * Footer top: multi-column footer menu.
 * Footer bottom: logo, social icons, addresses.
 */

/* ========================================================================
   Footer top — multi-column menu
   ======================================================================== */
footer.site-footer {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 var(--block-padding);
}

.footer-top {
  background-color: var(--color-white);
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--color-black);
  margin-top: var(--block-spacing);
}

/* The footer nav's top-level <ul> becomes a flex layout */
.footer-top nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Top-level items are category columns */
.footer-top nav > ul > li {
  margin: 0;
  padding: 0;
  flex: 1 1 140px;
}

/* Category headings (rendered as <span> for non-link parents) */
.footer-top nav > ul > li > span,
.footer-top nav > ul > li > a {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-menu-heading);
  line-height: var(--line-height-menu-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color-grey-dark);
  margin-bottom: 0.45rem;
}

/* Sub-menu items */
.footer-top nav > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-top nav > ul > li > ul > li {
  margin-bottom: 0.3rem;
}

.footer-top nav > ul > li > ul a {
  text-decoration: none;
  color: var(--color-grey-dark);
  font-size: var(--font-size-menu-item);
  line-height: var(--line-height-menu-item);
}

.footer-top nav > ul > li > ul a:hover {
  color: var(--color-text);
}

/* ========================================================================
   Footer bottom — logo, social, addresses
   ======================================================================== */

.footer-bottom {
  background-color: var(--color-white);
  padding: 2rem 0 3rem;
}

.footer-bottom .container {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem 3rem;
  align-items: start;
}

/* Logo — top left */
.footer-bottom [id*="shortlogo"],
.footer-bottom [id*="logofooter"] {
  grid-column: 1;
  grid-row: 1;
}

.footer-bottom [id*="shortlogo"] img,
.footer-bottom [id*="logofooter"] img {
  height: 4rem;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer-bottom [id*="shortlogo"] img:hover,
.footer-bottom [id*="logofooter"] img:hover {
  opacity: 1;
}

/* Social media nav — below logo */
.footer-bottom nav[id*="socialmedia"] {
  grid-column: 1;
  grid-row: 2;
}

.footer-bottom nav[id*="socialmedia"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
}

.footer-bottom nav[id*="socialmedia"] a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  font-size: 0;
  color: var(--color-white);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.footer-bottom nav[id*="socialmedia"] a::before {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  text-rendering: auto;
  line-height: 1;
}

.footer-bottom nav[id*="socialmedia"] a:hover {
  opacity: 1;
}

/* Icon assignments */
.footer-bottom nav[id*="socialmedia"] a[href*="twitter.com"]::before,
.footer-bottom nav[id*="socialmedia"] a[href*="x.com"]::before {
  content: '\e61b';
}
.footer-bottom nav[id*="socialmedia"] a[href*="youtube.com"]::before {
  content: '\f167';
}
.footer-bottom nav[id*="socialmedia"] a[href*="instagram.com"]::before {
  content: '\f16d';
}
.footer-bottom nav[id*="socialmedia"] a[href*="threads.net"]::before {
  content: '\e618';
}
.footer-bottom nav[id*="socialmedia"] a[href*="facebook.com"]::before {
  content: '\f39e';
}
.footer-bottom nav[id*="socialmedia"] a[href*="mastodon"]::before,
.footer-bottom nav[id*="socialmedia"] a[href*="berlin.social"]::before {
  content: '\f4f6';
}
.footer-bottom nav[id*="socialmedia"] a[href*="flickr.com"]::before {
  content: '\f16e';
}
.footer-bottom nav[id*="socialmedia"] a[href*="linkedin.com"]::before {
  content: '\f0e1';
}
.footer-bottom nav[id*="socialmedia"] a[href*="bsky.app"]::before,
.footer-bottom nav[id*="socialmedia"] a[href*="bluesky"]::before {
  content: '\e671';
}

/* Address blocks */
.footer-bottom [id*="locationfooter"] {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: var(--font-size-menu-item);
  line-height: var(--line-height-menu-item);
  color: var(--color-grey-dark);
}

.footer-bottom [id*="businessaddress"] {
  grid-column: 3;
  grid-row: 1 / 3;
  font-size: var(--font-size-menu-item);
  line-height: var(--line-height-menu-item);
  color: var(--color-grey-dark);
}

.footer-bottom [id*="locationfooter"] h3,
.footer-bottom [id*="businessaddress"] h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-menu-heading);
  line-height: var(--line-height-menu-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-dark);
  margin-bottom: 0.5rem;
  hyphens: auto;
}

.footer-bottom [id*="locationfooter"] p,
.footer-bottom [id*="businessaddress"] p {
  margin: 0;
  line-height: var(--line-height-menu-item);
}

/* ========================================================================
   Responsive
   ======================================================================== */

/* Tablet portrait */
@media (max-width: 767px) {
  .footer-top {
    padding: 2rem 0 1.5rem;
    margin-top: 1.5rem;
  }

  .footer-top nav > ul {
    gap: 1.5rem;
  }

  .footer-bottom {
    padding: 1.5rem 0 2rem;
  }

  .footer-bottom .container {
    grid-template-columns: auto 1fr;
    gap: 1rem 2rem;
  }

  .footer-bottom [id*="locationfooter"] {
    grid-column: 2;
    grid-row: auto;
  }

  .footer-bottom [id*="businessaddress"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Small mobile — single column */
@media (max-width: 599px) {
  .footer-top nav > ul > li {
    flex: 0 0 calc(50% - 1rem);
  }

  .footer-bottom .container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom [id*="shortlogo"],
  .footer-bottom [id*="logofooter"],
  .footer-bottom nav[id*="socialmedia"],
  .footer-bottom [id*="locationfooter"],
  .footer-bottom [id*="businessaddress"] {
    grid-column: auto;
    grid-row: auto;
  }
}