/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:  relative;
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Landscape mobile (≤767px): 2rem × 2 = 4rem */
@media (max-width: 767px) {
  .container {
    max-width: calc(100% - 4rem);
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1360px + 96px);   /* 1360px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }

  .container-wide > * {
    margin-left:  -1rem;
    width:        calc(100% + 2rem) !important;
  }
}


/* ============================================================
   SiteFooter — Site footer with 6-col sitemap and bottom bar
   Design tokens from src/tokens.css.

   Layout (Figma 832:12962):
     96px top padding, 48px bottom padding, 64px side padding
     80px gap between sitemap and bottom bar
     Sitemap: 6 equal columns, gap 32px
     Bottom bar: logo+copyright left | legal links center | social right
   ============================================================ */

.site-footer {
  /* Bottom 764px of a 1464px Figma gradient (continues from CtaSection).
     Picks up at 47.8% = rgba(222,215,204,0.5) → full end colour. */
  background:     linear-gradient(
                    180deg,
                    rgba(222, 215, 204, 0.5) 0%,
                    rgba(214, 207, 194, 0.5) 100%
                  ),
                  var(--background);
  font-family:    var(--font-family-default);
  width:          100%;
  box-sizing:     border-box;
  padding:        6rem 0 3rem;      /* 96px top, 48px bottom — sides via container-wide */
}

.site-footer__inner {
  display:        flex;
  flex-direction: column;
  gap:            5rem;             /* 80px */
}


/* ============================================================
   Sitemap — 6 equal columns
   ============================================================ */

.site-footer__sitemap {
  display:         flex;
  justify-content: space-between;
  gap:             2rem;    /* 32px */
  width:           100%;
  list-style:      none;
  margin:          0;
  padding:         0;
}

.site-footer__col {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;    /* 24px */
}

.site-footer__col-heading {
  margin:      0;
  font-size:   1rem;         /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color:       var(--foreground);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Toggle button — inherits heading styles, no button chrome */
.site-footer__col-toggle {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      default;
  font-family: var(--font-family-default);
  text-align:  left;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  width:       100%;
}

/* Chevron — hidden on desktop */
.site-footer__col-chevron {
  display: none;
}

.site-footer__col-links {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        1.5rem;   /* 24px */
}

.site-footer__link {
  font-size:       0.875rem;   /* 14px */
  font-weight:     var(--font-weight-regular);
  line-height:     1.5;
  color:           var(--foreground);
  text-decoration: none;
  display:         block;
  transition:      opacity 150ms ease;
}

.site-footer__link:hover {
  opacity: 0.7;
}

.site-footer__link--bold {
  font-weight: var(--font-weight-bold);
}


/* ---- "Now hiring" standalone tablet/mobile link ----------- */
.site-footer__now-hiring {
  display: none;   /* hidden on desktop */
}

.site-footer__now-hiring-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         0.625rem 0.75rem 0.625rem 1rem;
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-bold);
  line-height:     var(--line-height-base);
  color:           var(--info, #59b7d9);
  text-decoration: none;
  border-radius:   12px;
  transition:      opacity 150ms ease;
}

.site-footer__now-hiring-link:hover {
  opacity: 0.8;
}

.site-footer__now-hiring-link svg {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
}

.site-footer__now-hiring-link svg path {
  stroke: currentColor;
}


/* ============================================================
   Bottom bar
   ============================================================ */

.site-footer__bar {
  display:     flex;
  align-items: flex-end;
  flex-wrap:   wrap;
  gap:         0.9375rem 0;   /* 15px row gap */
  justify-content: space-between;
  padding:     1px 0;
}

/* Brand: logo + copyright */
.site-footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            1rem;    /* 16px */
  justify-content: flex-end;
}


.site-footer__copyright {
  margin:      0;
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--muted-foreground);
  white-space: pre;
}

/* Legal links */
.site-footer__legal {
  display:     flex;
  gap:         2rem;    /* 32px */
  align-items: flex-start;
  flex-wrap:   wrap;
}

.site-footer__legal-link {
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-bold);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
  text-decoration: none;
  white-space:     nowrap;
  transition:      opacity 150ms ease;
}

.site-footer__legal-link:hover {
  opacity: 0.7;
}

/* Social icons */
.site-footer__social {
  display:     flex;
  align-items: center;
  gap:         2rem;    /* 32px */
  height:      32px;
}

.site-footer__social-link {
  display:    flex;
  align-items: center;
  color:       var(--foreground);
  width:       24px;
  height:      24px;
  flex-shrink: 0;
  transition:  opacity 150ms ease;
}

.site-footer__social-link:hover {
  opacity: 0.7;
}

.site-footer__social-link svg {
  width:  24px;
  height: 24px;
}


/* ============================================================
   Tablet (≤991px) — accordion nav
   ============================================================ */

@media (max-width: 991px) {
  .site-footer {
    padding: 5rem 0 2.5rem;   /* 80px top */
  }

  /* Opt out of container-wide's blanket bleed rule */
  .site-footer__sitemap,
  .site-footer__bar {
    margin-left: 0 !important;
    width:       100% !important;
  }

  .site-footer__sitemap {
    margin-left: -1rem !important;
    width:       calc(100% + 2rem) !important;
  }

  .site-footer__inner {
    gap: 5rem;   /* 80px */
  }

  .site-footer__sitemap {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;   /* 10px */
  }

  .site-footer__col {
    gap:           0;
    border-radius: 12px;
    overflow:      hidden;
  }

  .site-footer__col-toggle {
    cursor:  pointer;
    padding: 0.625rem 0.75rem 0.625rem 1rem;   /* 10px 12px 10px 16px */
  }

  .site-footer__col-chevron {
    display:     block;
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    color:       var(--muted-foreground);
    transition:  transform 200ms ease;
  }

  .site-footer__now-hiring-link .site-footer__col-chevron {
    color: inherit;
  }

  .site-footer__col--open {
    background: var(--accent);
  }

  .site-footer__col--open .site-footer__col-chevron {
    transform: rotate(180deg);
  }

  /* Smooth open/close via grid row animation */
  .site-footer__col-body {
    display:            grid;
    grid-template-rows: 0fr;
    transition:         grid-template-rows 220ms ease;
  }

  .site-footer__col--open .site-footer__col-body {
    grid-template-rows: 1fr;
  }

  .site-footer__col-links-wrap {
    overflow: hidden;   /* clips without padding — allows full collapse to 0 */
  }

  .site-footer__col-links {
    padding: 0.5rem 1rem 1rem;   /* 8px 16px 16px */
  }

  .site-footer__col-links {
    gap: 1.25rem;
  }

  .site-footer__link {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  /* "Now hiring" standalone link — tablet only */
  .site-footer__now-hiring {
    display: flex;
  }

  .site-footer__link--tablet-hidden {
    display: none;
  }

  .site-footer__bar {
    gap:            2rem;
    flex-direction: column;
    align-items:    flex-start;
  }

  .site-footer__legal {
    gap:   1rem;
    order: 1;
  }
}


/* ============================================================
   Mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .site-footer {
    padding: 3rem 0 2rem;
  }

  .site-footer__bar {
    gap: 2.25rem;   /* 36px */
  }
}