/* ==========================================================================
   AVRA - footer, exact Figma values

   Elementor's form-widget and button styles outrank plain class selectors, so
   the newsletter field and submit need the extra weight here. Everything else
   is set on the widgets themselves so the Elementor editor shows the truth.
   ========================================================================== */

.avra-newsletter input[type="email"],
.avra-newsletter .elementor-field-group input[type="email"],
.avra-newsletter .elementor-field-textual {
  font-family: var(--avra-body) !important;
  font-size: 16px !important;
  font-weight: 350 !important;
  line-height: 20px !important;
  letter-spacing: .32px !important;
  height: 46px !important;
  color: var(--avra-grey) !important;
}

/* Figma sets no tracking on "Subscribe" */
.avra-newsletter button[type="submit"] {
  letter-spacing: normal !important;
  font-weight: 500 !important;
  font-family: var(--avra-display) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Basel Grotesk Book (350) is the footer body weight throughout */
.avra-footer__blurb,
.avra-footer__blurb p,
.avra-footer__copy,
.avra-footer__copy p,
.avra-footer__contact p,
.avra-footer__contact a,
.avra-footer__col .elementor-nav-menu--main .elementor-item {
  font-weight: 350;
}

/* Figma 25502:1602 / 1608 / 1619 (mobile 2383 / 2389 / 2400):
   footer column headings are #201f1e at 80% opacity, not full strength. */
.avra-footer__main .elementor-heading-title { opacity: .8; }
.avra-footer__banner .elementor-heading-title { opacity: 1; }

/* Blurb colour (Figma 25502:1610) lives on the ftrblurb text-editor widget,
   because its text_color setting outranks this stylesheet. */

/* Figma's mobile footer (Nav 25502:2399 / Info 25502:2382) is two 174px columns
   at left 24 and 232 inside a 430 frame - 232+174 = 406. Those fixed widths
   overflow any viewport narrower than 430, which is the horizontal scroll.
   Equal fluid columns reproduce 174px exactly at 430 and shrink below it. */
@media (max-width: 1919px) {
  .avra-footer .elementor-element-ftrnavrow {
    display: flex;
    flex-wrap: nowrap;
    gap: 34px;
  }
  .avra-footer .elementor-element-ftrnav,
  .avra-footer .elementor-element-ftrinfo {
    width: auto !important;
    max-width: none;
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

/* Tablet band (768-1024): Elementor's mobile rules only apply at <=767, so the
   footer bottom row kept its desktop widths (ftrcontact pinned to 720px at
   x760 = 1480 total) and forced real horizontal scroll on iPad. Stack it. */
@media (max-width: 1024px) {
  .avra-footer__bottom { flex-wrap: wrap !important; }
  .avra-footer__bottom > .e-con,
  .avra-footer__copy,
  .avra-footer__contact,
  .elementor-element-ftrcontact,
  .elementor-element-ftrsocial,
  .elementor-element-ftrcopy {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .avra-footer__contact { flex-wrap: wrap; }
}

/* The footer is authored at the 1920 design width (120 gutter + 1680 content =
   1800). Every viewport below the design width overflowed. Let the columns be
   fluid; the 1920 layout is unchanged because the rule stops at 1919. */
@media (max-width: 1919px) {
  .avra-footer__main,
  .avra-footer__cols,
  .avra-footer__bottom,
  .elementor-element-ftrnavrow,
  .elementor-element-ftrnews,
  .elementor-element-ftrnewsin,
  .elementor-element-ftrnewslab,
  .elementor-element-ftrcopy {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
  }
  .avra-footer__cols { flex-wrap: nowrap; }
  .avra-footer__cols > * { min-width: 0; }
  .elementor-element-ftrnavrow { flex: 0 1 auto !important; }
  .elementor-element-ftrnews   { flex: 1 1 360px !important; }
}

/* Same band, bottom row and CTA inner: these kept desktop widths and still
   overflowed around 1100. Fluid, not forced to 100%, so wide viewports keep
   the side-by-side arrangement. */
@media (max-width: 1919px) {
  .avra-footer__bottom { flex-wrap: wrap; }
  .elementor-element-ftrcontact,
  .elementor-element-ftrsocial,
  .elementor-element-ftrcopy,
  .elementor-element-spctain {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
  }
}

/* Figma 25502:1203: each Socials instance is an 18x18 box, gap 20.
   The social glyphs are not square (YouTube 18x12.6, X 18x16.3), so forcing a
   width stretched them to unequal heights - 22x15, 22x20 etc. Box them and let
   each glyph keep its own ratio. */
.avra-socials { gap: 20px !important; align-items: center; }
.avra-socials a {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}
.avra-socials svg {
  width: auto !important;
  height: auto !important;
  max-width: 18px;
  max-height: 18px;
  display: block;
}

/* stack only where there is no room for four columns */
@media (max-width: 1024px) {
  .avra-footer__cols { flex-wrap: wrap !important; }
  .elementor-element-ftrnews { flex: 1 1 100% !important; }
}