/* ============================================================
   FOOTER.CSS  — Dark rounded card with "Get in Touch" form

   FIGMA MEASUREMENTS:
   ┌─────────────────────────────────────────────────────────┐
   │  Footer: bg #1f1f1f, border-radius 18.75px              │
   │  Inner content top: 87px                                │
   │  Sections gap: 75px                                     │
   │                                                         │
   │  Top row (gap=54px):                                    │
   │    Left section:  463.623px, flex-col gap=141.75px      │
   │      Pitch:   label + 45px heading (gap=14.25px)        │
   │      Contact: flex-row gap=72px                         │
   │        Col1 (171.75px): Call Center + Email (gap=42px)  │
   │        Col2 (199.5px):  Location + Social (gap=18px)    │
   │    Right form card: flex:1, white, rounded-18.75px      │
   │      Form content: max-w=336.307px, centered            │
   │                                                         │
   │  Footer links:  justify-between, w=1039.5px             │
   │    Left: logo (34.65×26.16) + SODEL wordmark + tagline  │
   │    Right: Company nav + Services nav (gap=37.5px)       │
   │                                                         │
   │  Copyright bar: h=61.485px, white pill, concave wings   │
   │    White bar: left=30px right=30px h=43.485px           │
   │    Wings: box-shadow 0 15px 0 0 white, border-radius    │
   └─────────────────────────────────────────────────────────┘
   ============================================================ */


/* ------------------------------------------------------------
   1. FOOTER CARD
   ------------------------------------------------------------ */
.footer {
  width: 100%;
  background: #1f1f1f;
  border-radius: 18.75px;
  margin-top: var(--sp-4);
  margin-bottom: 32px;
}

/* Inner: centered column, children align center */
.footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 75px;
}


/* ------------------------------------------------------------
   2. TOP ROW  (left pitch+contact  |  right form card)
   Figma: flex gap-[54px]
   ------------------------------------------------------------ */
.footer__top {
  display: flex;
  gap: 54px;
  align-items: flex-start;
  width: 100%;
}


/* ------------------------------------------------------------
   3. LEFT SECTION  (pitch + contact info)
   Figma: w=463.623px flex-col gap=[141.75px]
   ------------------------------------------------------------ */
.footer__left {
  width: 463.623px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 141.75px;
}

/* Pitch: "/ get in touch /" label + big heading */
.footer__pitch {
  display: flex;
  flex-direction: column;
  gap: 14.25px;
}

.footer__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #f5f5f5;
}

.footer__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -2.25px;
  color: #f5f5f5;
}

/* Contact info row: two columns */
.footer__contact {
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

/* Col 1: Call Center + Email */
.footer__contact-col-a {
  width: 171.75px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* Col 2: Location + Social */
.footer__contact-col-b {
  width: 199.5px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Contact group (e.g. "Call Center", "Email") */
.footer__contact-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__contact-group--tight {
  gap: 13.5px;
}

.footer__contact-heading {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 15px;
  line-height: 22.5px;
  color: #f5f5f5;
}

/* Phone numbers list */
.footer__phone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__phone-list a,
.footer__email-link {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 22.5px;
  color: #f5f5f5;
  text-decoration: none;
}

.footer__phone-list a:hover,
.footer__email-link:hover {
  opacity: 0.8;
}

.footer__email-link {
  display: block;
}

/* Address */
.footer__address {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 22.5px;
  color: #f5f5f5;
  margin: 0;
}

/* Social icons */
.footer__social-icons {
  display: flex;
  gap: 18.75px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.footer__social-icon:hover {
  opacity: 0.7;
}

/* Font Awesome icon sizing */
.footer__social-icon i {
  font-size: 14px;
  width: 14px;
  text-align: center;
  display: block;
  color: #ffffff;
}


/* ------------------------------------------------------------
   4. RIGHT FORM CARD
   Figma: bg-white rounded-[18.75px] flex items-center px≈93 py=81.75
   ------------------------------------------------------------ */
.footer__form-card {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border-radius: 18.75px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 81.75px 30px;
}

.footer__form-content {
  width: 100%;
  max-width: 336.307px;
  display: flex;
  flex-direction: column;
  gap: 25.5px;
}

/* Form header: title + subtitle */
.footer__form-header {
  display: flex;
  flex-direction: column;
  gap: 15.75px;
}

.footer__form-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 22.5px;
  line-height: 30px;
  letter-spacing: -0.675px;
  color: #111111;
}

.footer__form-subtitle {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 22.5px;
  color: #333333;
}

/* Form fields container */
.footer__form-fields {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

/* Individual field wrapper */
.footer__form-field {
  position: relative;
  width: 100%;
}

/* Input and textarea: bottom-border only */
.footer__form-field input,
.footer__form-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 0.75px solid #adadad;
  outline: none;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 10.5px;
  line-height: 13.65px;
  color: #111111;
  padding: 2.25px 0 8px;
  resize: none;
  transition: border-color 0.2s;
}

.footer__form-field textarea {
  height: 90px;
  line-height: 20.25px;
  padding-top: 2.25px;
}

.footer__form-field input:focus,
.footer__form-field textarea:focus {
  border-bottom-color: #333333;
}

/* Placeholder colour */
.footer__form-field input::placeholder,
.footer__form-field textarea::placeholder {
  color: #9b9b9b;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 10.5px;
}

/* "Send a message" dark pill button
   Figma: w=131.88px h=37.485px bg=#333 rounded-pill */
.footer__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 131.88px;
  height: 37.485px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius-pill);
  background: #333333;
  border: 0.75px solid #333333;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease-default);
}

.footer__form-submit:hover {
  background: #111111;
  border-color: #111111;
}

.footer__form-submit-icon {
  width: 6.5px;
  height: 9.75px;
  display: block;
  flex-shrink: 0;
  transform: scaleY(-1);
  filter: brightness(0) invert(1);
}


/* ------------------------------------------------------------
   5. FOOTER LINKS ROW
   Figma: flex items-end justify-between w=1156.93px (≈ full inner width)
   Brand (w=309.75px) at bottom-left  |  Nav (w=361.25px) at top-right
   Copyright wrap: w=1039.5px centered (x=58.715 offset confirmed in Figma)
   ------------------------------------------------------------ */
.footer__links {
  display: flex;
  align-items: flex-end;       /* brand block sits at bottom of row — Figma y=52.59 in 166.5px height */
  justify-content: space-between;
  width: 100%;                 /* fills footer__inner (≈1157px), not 1039.5px */
}

/* Brand block: logo + tagline */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18.75px;
  width: 309.75px;
  flex-shrink: 0;
}

/* Logo link in footer — inherits .logo from header.css,
   just strip the underline decoration */
.footer__logo-link {
  text-decoration: none;
  gap: 5.375px;
}

.footer__tagline {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 22.5px;
  color: #f5f5f5;
  max-width: 309.75px;
}

/* Navigation columns — Figma: flex gap-[37.5px] items-center shrink-0 */
.footer__nav {
  display: flex;
  gap: 37.5px;
  align-items: center;
  flex-shrink: 0;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__nav-heading {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 22.5px;
  color: #f5f5f5;
  margin-bottom: 0;
}

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

.footer__nav-list a {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 22.5px;
  color: #f5f5f5;
  text-decoration: none;
  white-space: nowrap;
}

.footer__nav-list a:hover {
  opacity: 0.7;
}


/* ------------------------------------------------------------
   6. COPYRIGHT BAR
   White pill with concave corners, sitting flush at the
   bottom of the footer card.
   Figma: h=61.485px, white bar left=30 right=30 h=43.485px
          rounded-tl-18.75 rounded-tr-18.75
          Wings: box-shadow 0 15px 0 0 white
   ------------------------------------------------------------ */
.footer__copyright-wrap {
  position: relative;
  height: 61.485px;
  width: 1039.5px;
  overflow: hidden;
}

/* White bar: rounded top corners, straight bottom */
.footer__copyright-bar {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 43.485px;
  background: #ffffff;
  border-radius: 18.75px 18.75px 0 0;
}

/* Left concave wing (outside bar, in dark footer area) */
.footer__copyright-bar::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 100%;
  width: 16px;
  height: 30px;
  background: transparent;
  border-bottom-right-radius: 15px;
  box-shadow: 0 15px 0 0 #ffffff;
  pointer-events: none;
}

/* Right concave wing */
.footer__copyright-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 16px;
  height: 30px;
  background: transparent;
  border-bottom-left-radius: 15px;
  box-shadow: 0 15px 0 0 #ffffff;
  pointer-events: none;
}

/* Content inside the white bar */
.footer__copyright-content {
  position: absolute;
  top: 13.5px;
  left: 43.5px;
  right: 43.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copyright-text {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 18px;
  color: rgba(51, 51, 51, 0.75);
}

.footer__copyright-text a {
  color: rgba(51, 51, 51, 0.75);
  text-decoration: underline;
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__legal-links a {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 18px;
  color: rgba(51, 51, 51, 0.75);
  text-decoration: underline;
}

.footer__legal-links a:hover {
  color: #333333;
}


/* ------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1240px) {
  .footer__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .footer__copyright-wrap {
    width: 100%;
  }

  .footer__copyright-bar {
    left: 0;
    right: 0;
    border-radius: 18.75px 18.75px 0 0;
  }

  .footer__copyright-bar::before,
  .footer__copyright-bar::after {
    display: none;
  }

  .footer__copyright-content {
    left: 20px;
    right: 20px;
  }
}

@media (max-width: 1024px) {
  .footer__top {
    flex-direction: column;
    gap: 48px;
  }

  .footer__left {
    width: 100%;
    gap: 48px;
  }

  .footer__form-card {
    width: 100%;
  }

  .footer__heading {
    font-size: 36px;
    line-height: 44px;
  }

  .footer__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .footer {
    border-radius: 12px;
  }

  .footer__inner {
    padding-top: 48px;
    gap: 48px;
  }

  .footer__contact {
    flex-direction: column;
    gap: 32px;
  }

  .footer__contact-col-a,
  .footer__contact-col-b {
    width: 100%;
  }

  .footer__heading {
    font-size: 30px;
    line-height: 38px;
  }

  .footer__form-card {
    padding: 40px 24px;
  }

  .footer__nav {
    flex-wrap: wrap;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .footer__copyright-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    top: 8px;
  }
}