/* UAE Startup Story custom footer - simple, clean, black.
   Scoped to .uss-footer, so it does not restyle other pages. */

.uss-footer {
  background: var(--uss-ink);
  color: var(--uss-paper);
  padding: 3.5rem 0 0;
}

/* The site container (1250px, centred, with gutters) is defined
   in design-system.css as .uss-custom .uss-container, so it only
   applies inside a .uss-custom ancestor. The footer now renders
   site-wide from the theme footer hook, outside any .uss-custom
   element, so without this rule the footer spans the full viewport
   and its content bleeds past the page container. This rule gives
   the footer its own container, matching the site width. */
.uss-footer .uss-container {
  width: 100%;
  max-width: var(--uss-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--uss-gutter);
  padding-right: var(--uss-gutter);
}

.uss-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.uss-footer-wordmark {
  display: inline-block;
  font-family: var(--uss-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--uss-paper);
  margin-bottom: 0.75rem;
}

/* Wordmark was invisible (black on black): the base .uss-custom
   a rule (ink) beats a single wordmark class, so this
   higher-specificity rule forces white, with no hover colour.
   Scoped to .uss-footer so it works on every page, not only
   the new homepage. */
.uss-footer .uss-footer-wordmark,
.uss-footer .uss-footer-wordmark:hover {
  color: var(--uss-paper);
}

.uss-footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1.25rem;
}

.uss-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.uss-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--uss-paper);
  color: var(--uss-ink);
}

.uss-footer-social a:hover {
  background: var(--uss-accent);
  color: var(--uss-paper);
}

.uss-footer-social svg {
  width: 1.125rem;
  height: 1.125rem;
}

.uss-footer-col h3 {
  font-family: var(--uss-font-nav);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uss-paper);
  margin: 0 0 1rem;
}

.uss-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uss-footer-col li {
  margin: 0 0 0.5rem;
}

.uss-footer-col a {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.uss-footer-col a:hover { color: var(--uss-accent); }

.uss-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid #2a2a2a;
  padding: 1.5rem 0;
}

.uss-footer-bottom p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.uss-footer-bottom a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.uss-footer-bottom a:hover { color: var(--uss-accent); }

@media (max-width: 64rem) {
  .uss-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .uss-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  .uss-footer {
    padding: 2.5rem 0 0;
  }

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

  .uss-footer-brand {
    grid-column: auto;
  }

  .uss-footer-col a {
    display: block;
    padding: 0.375rem 0;
  }

  .uss-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}