/* ==========================================================================
   Footer — MBA ACT
   Figma reference: Nw2x8ncb0hP9sVqTIG6jpe node 10546:14502 ("Footer & CTA").
   Structure: contact banner (navy) + gray footer body + credits row.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contact Banner — Figma node 10317:18020: navy #0B1628, H6 20px Bold, 36px icons
   -------------------------------------------------------------------------- */
.footer-contact {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 14px var(--space-16);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.footer-contact__item {
  display: flex;
  align-items: center;
  gap: var(--space-6); /* 24 per Figma */
  padding: 0 13px;
  font-size: 1.25rem; /* H6 20px */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.footer-contact__item a {
  color: var(--color-white);
  text-decoration: none;
}

.footer-contact__item a:hover { color: var(--color-tangerine); }

.footer-contact .material-symbols-outlined {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--color-tangerine);
}

@media (max-width: 768px) {
  /* Footer contact bar mobile — Figma node 10546:15789 (Footer & CTA Mobile).
     Container: column gap 10, padding 14×20. Each row: icon (36) + text H6
     mobile = 18 px (desktop is 20 px — too big at 402 viewport, text wraps). */
  .footer-contact {
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px;
  }
  .footer-contact__item {
    padding: 0;
    font-size: 18px;
    line-height: 1.3;
  }
}

/* --------------------------------------------------------------------------
   Footer body — #F2F2F2 bg, 2-column grid, watermark logo
   -------------------------------------------------------------------------- */
.footer-body {
  position: relative;
  background-color: #F2F2F2;
  color: var(--color-navy); /* Figma fill_2UK097 #0B1628 body text */
  padding: 80px 64px 64px;
  overflow: hidden;
}

/* Logo watermark — Figma: white "MBA Logo Stacked" variant at 50% opacity over
   #F2F2F2 footer bg (renders as a soft light shape, not a dark-on-dark blot
   like the previous navy SVG at 8% would). */
.footer-body::before {
  content: "";
  position: absolute;
  top: 329.7px;
  left: -33px;
  width: 539px;
  height: 539px;
  background-image: url('../images/mba-logo-stacked-white.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* 2-column grid — Content row (layout_4S33AG gap 64) */
.footer-body__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  gap: 64px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Column 1: Info block (logo, address/hours/postal/contact, social) */
.footer-col--info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-col--info .footer-logo {
  display: inline-flex;
  width: 347.62px;
  max-width: 100%;
}

.footer-col--info .footer-logo img {
  width: 100%;
  height: auto;
}

/* Info blocks — column gap 24 between each labeled block */
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-info__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-navy);
}

.footer-info__label {
  margin: 0;
  font-weight: var(--font-weight-bold); /* Text/Small/Semi Bold */
  font-size: 14px;
  line-height: 1.5;
}

.footer-info__block p {
  margin: 0;
  font-weight: var(--font-weight-regular);
}

.footer-info__link {
  color: var(--color-navy);
  text-decoration: underline; /* Text/Small/Link */
}

.footer-info__link:hover { color: var(--color-tangerine); }

/* Social icons row, gap 12 per Figma */
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-tangerine); /* Figma: tangerine social icons */
  transition: color 0.2s ease;
}

.footer-social__link:hover { color: var(--color-tangerine-dark); }
.footer-social__link svg { width: 24px; height: 24px; fill: currentColor; }

/* Column 2: Nav columns — Quick Links + More to explore (with AoC) */
.footer-col--nav {
  display: grid;
  grid-template-columns: 288px 1fr; /* Figma: Quick Links 288w + More-to-explore 396w */
  gap: 24px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
}

.footer-nav__heading {
  margin: 0;
  padding: 8px 0;
  /* Figma Heading/Tagline: Frutiger 65 Bold 16px, tangerine #FF6600 */
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-tangerine);
}

.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.footer-nav__list li {
  padding: 8px 0; /* Figma link row padding */
}

.footer-nav__list a {
  font-size: 14px;
  font-weight: var(--font-weight-bold); /* Semi Bold */
  line-height: 1.5;
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav__list a:hover { color: var(--color-tangerine); }

/* Acknowledgement of Country — lives inside the More to explore column,
   gap 16 from the link list above per Figma layout_CAYV2X. */
.footer-aoc {
  margin-top: 16px;
}

.footer-aoc .footer-nav__heading {
  padding-bottom: 8px;
}

.footer-aoc__text {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Credits row — divider + copyright + legal links
   -------------------------------------------------------------------------- */
.footer-credits {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 80px auto 0; /* Figma gap 80 between content and credits */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-credits__divider {
  border: 0;
  border-top: 1px solid var(--color-navy-lighter); /* #CED0D4 */
  margin: 0;
}

.footer-credits__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-credits__copy {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--color-navy);
}

.footer-credits__legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-credits__legal a {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--color-navy);
  text-decoration: underline;
}

.footer-credits__legal a:hover { color: var(--color-tangerine); }

/* "Website by one x" — Figma uses #545B68 (navy-light) */
.footer-credits__byline { color: var(--color-navy-light) !important; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-body { padding: 48px 32px; }
  .footer-body__grid { grid-template-columns: 1fr; }
  .footer-col--nav { grid-template-columns: 1fr 1fr; }
  .footer-credits { margin-top: 48px; }
}

@media (max-width: 640px) {
  .footer-col--nav { grid-template-columns: 1fr; }
  .footer-credits__row { flex-direction: column; }
}