/* ==========================================================================
   Footer — match Figma (MRB Metals, node 500:786 / 138-665)
   Light #ededed footer · dark #2d2d2d text · orange #f5821f accents
   Left: logo + link lists · Right: "Get In Touch" contact details

   The inquiry form that used to hold the right column now lives in the home
   page CTA section; the .mrb-footer-form block below is kept because
   mrb_footer_inject_form() can be re-hooked to bring it back.
   ========================================================================== */

 .mrb-footer-custom .bs-footer-4-area {
   background: #ededed;
 }

 /* Figma has no visible bg image */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-bg {
   display: none;
 }

 /* Layout: left (logo + lists) / right (form) */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-wrap {
   display: flex;
   justify-content: space-between;
   gap: 60px;
   flex-wrap: wrap;
 }

 /* ==========================================================================
   "Get In Touch" column (Figma 500:863)

   The Barsi block is built for a dark footer — 80px white heading, 28px
   #888 values, 43px between rows. Everything below is the light-footer
   equivalent from Figma: 46px heading, 22px values on #a8a8b0 rules, and
   an uppercase 16px label above each.
   ========================================================================== */

 /* Both columns have to be allowed to shrink. Left at their content widths
    the pair needed ~1164px and wrapped at 1366 and 1200 — the contact column
    dropped under the links and the footer went from 869px to 1303px tall.
    They now share the row and stack only where the <=1199 block says so. */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-left {
   flex: 1 1 380px;
   min-width: 0;
 }

 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-contact {
   flex: 1 1 480px;
   min-width: 0;
   max-width: 660px;
 }

 .mrb-footer-custom .bs-footer-4-contact .title {
   font-family: 'Albert Sans', sans-serif;
   font-weight: 700;
   /* 46px is Figma at 1920. The theme's own steps (60/50/40) are sized for
      its 80px dark-footer heading, so this block carries its own ramp — in
      breakpoints rather than vw, to match how the rest of this file steps. */
   font-size: 46px;
   line-height: 1.2;
   color: #2d2d2d;
   margin-bottom: 40px;
 }

 .mrb-footer-custom .bs-footer-4-contact .link-title {
   font-family: 'DM Sans', sans-serif;
   font-weight: 500;
   font-size: 16px;
   line-height: 25px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #1a1a1a;
   margin: 0 0 10px;
 }

 /* Figma: 35px from the value's rule to the next label. */
 .mrb-footer-custom .bs-footer-4-contact .link-title:not(:first-child) {
   margin-top: 35px;
 }

 .mrb-footer-custom .bs-footer-4-contact .link-elm,
 .mrb-footer-custom .bs-footer-4-contact .disc-elm {
   display: block;
   width: 100%;
   font-family: 'Albert Sans', sans-serif;
   font-weight: 400;
   font-size: 22px;
   line-height: 1.45;
   color: #666672;
   border-bottom: 1px solid #a8a8b0;
   padding-bottom: 14px;
   margin: 0;
 }

 /* The theme spaces consecutive values by 43px; here every value is followed
    by its own label, which carries the spacing above. */
 .mrb-footer-custom .bs-footer-4-contact .link-elm:not(:last-child),
 .mrb-footer-custom .bs-footer-4-contact .disc-elm:not(:last-child) {
   margin-bottom: 0;
 }

 .mrb-footer-custom .bs-footer-4-contact .link-elm p {
   margin: 0;
   font: inherit;
   color: inherit;
 }

 /* Address has two paragraphs (factory, corporate office). */
 .mrb-footer-custom .bs-footer-4-contact .link-elm p + p {
   margin-top: 12px;
 }

 .mrb-footer-custom .bs-footer-4-contact .link-elm a {
   color: inherit;
   text-decoration: none;
   border-bottom: 0;
   transition: color 0.3s ease;
 }

 .mrb-footer-custom .bs-footer-4-contact .link-elm a:hover {
   color: #f5821f;
 }

 /* Link lists: DM Sans 18px, dark */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-menu li a {
   font-family: 'DM Sans', sans-serif;
   font-size: 18px;
   line-height: 27px;
   color: #2d2d2d;
 }

 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-menu li a:hover {
   color: #f5821f;
 }

 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-menu li {
   margin-bottom: 14px;
 }

 /* Figma puts the second list 213px from the first's left edge; the theme's
    120px column gap pushed it 43px past that. */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-widget {
   gap: 50px 77px;
 }

 /* Figma's Container:margin — 130px of space opens the footer and ~60px
    closes the column block before the copyright rule. The theme ships
    pt-130 / mb-125, and 125px left the bar floating. */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-wrap {
   margin-bottom: 60px;
 }

 /* ==========================================================================
   Inquiry form column
   ========================================================================== */

 .mrb-footer-custom .mrb-footer-form {
   flex: 0 1 613px;
   max-width: 613px;
   width: 100%;
 }

 .mrb-footer-custom .mrb-footer-form-title {
   font-family: 'Albert Sans', sans-serif;
   font-weight: 700;
   font-size: 46px;
   line-height: 1.2;
   color: #2d2d2d;
   margin-bottom: 40px;
 }

 .mrb-footer-custom .mrb-footer-form .mrb-ff-field {
   margin-bottom: 32px;
 }

 .mrb-footer-custom .mrb-footer-form .mrb-ff-field label {
   display: block;
   font-family: 'DM Sans', sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #2d2d2d;
   margin-bottom: 0;
 }

 .mrb-footer-custom .mrb-footer-form .wpcf7-form-control-wrap {
   display: block;
 }

 .mrb-footer-custom .mrb-footer-form input[type='text'],
 .mrb-footer-custom .mrb-footer-form input[type='tel'],
 .mrb-footer-custom .mrb-footer-form input[type='email'],
 .mrb-footer-custom .mrb-footer-form textarea {
   display: block;
   width: 100%;
   max-width: 494px;
   background: transparent;
   border: 0;
   border-bottom: 1px solid #a8a8b0;
   border-radius: 0;
   padding: 14px 0;
   font-family: 'DM Sans', sans-serif;
   font-size: 16px;
   line-height: 21px;
   color: #2d2d2d;
   outline: none;
   transition: border-color 0.3s ease;
 }

 .mrb-footer-custom .mrb-footer-form textarea {
   height: 50px;
   min-height: 50px;
   resize: vertical;
 }

 .mrb-footer-custom .mrb-footer-form input::placeholder,
 .mrb-footer-custom .mrb-footer-form textarea::placeholder {
   color: #a8a8b0;
   opacity: 1;
 }

 .mrb-footer-custom .mrb-footer-form input:focus,
 .mrb-footer-custom .mrb-footer-form textarea:focus {
   border-bottom-color: #f5821f;
 }

 /* Send Inquiry button: 191x51 orange */
 .mrb-footer-custom .mrb-footer-form input[type='submit'],
 .mrb-footer-custom .mrb-footer-form .wpcf7-submit {
   display: inline-block;
   min-width: 191px;
   min-height: 51px;
   background: #f5821f;
   color: #ffffff;
   border: 0;
   border-radius: 0;
   font-family: 'Albert Sans', sans-serif;
   font-weight: 500;
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
   margin-top: 8px;
   padding: 16px 32px;
   transition: background 0.3s ease;
 }

 .mrb-footer-custom .mrb-footer-form input[type='submit']:hover,
 .mrb-footer-custom .mrb-footer-form .wpcf7-submit:hover {
   background: #2d2d2d;
 }

 /* CF7 validation + status messages */
 .mrb-footer-custom .mrb-footer-form .wpcf7-not-valid {
   border-bottom-color: #dc3232;
 }

 .mrb-footer-custom .mrb-footer-form .wpcf7-not-valid-tip {
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   color: #dc3232;
   margin-top: 6px;
 }

 .mrb-footer-custom .mrb-footer-form .wpcf7-response-output {
   margin: 16px 0 0;
   padding: 10px 14px;
   border: 1px solid #f5821f;
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   color: #2d2d2d;
 }

 /* The idle spinner is invisible but still takes a 24px inline box beside the
   button, and on narrow screens it wrapped onto its own line — adding 28px
   under the button that the top of the footer had no counterpart for. Take
   it out of flow; it still appears next to the button while submitting. */
 .mrb-footer-custom .mrb-footer-form .wpcf7-spinner {
   position: absolute;
   margin-left: 12px;
   vertical-align: middle;
 }

 .mrb-footer-custom .mrb-footer-form .wpcf7-form {
   position: relative;
 }

 /* ==========================================================================
   Copyright bar
   ========================================================================== */

 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright {
   border-top: 1px solid rgba(102, 102, 114, 0.4);
   background: transparent;
   padding-top: 28px;
   padding-bottom: 28px;
 }

 /* Figma sets the sentence back to 50% and keeps the company name at full
    strength, so the name reads as the subject and the rest as small print. */
 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-text {
   font-family: 'DM Sans', sans-serif;
   font-size: 16px;
   line-height: 25px;
   color: rgba(45, 45, 45, 0.5);
   margin-bottom: 0;
 }

 .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-text a {
   font-family: 'DM Sans', sans-serif;
   font-size: 16px;
   color: #1a1a1a;
   text-decoration: none !important;
   border-bottom: none !important;
 }

/* Plain text, not a chip. The white pill it used to sit in read as a button
   next to a line of copyright that is not one, and it was the loudest thing
   in the quietest part of the page. */
.mrb-footer-custom .bs-footer-4-area .mrb-creole-credit {
  /* The credit is injected before the social block, but Figma reads
     copyright · social · credit from left to right. */
  order: 3;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #2d2d2d;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-bottom: 0;
}

.mrb-footer-custom .bs-footer-4-area .mrb-creole-credit a {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #2d2d2d;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  border-bottom: none !important;
  font-weight: 500;
}

.mrb-footer-custom .bs-footer-4-area .mrb-creole-credit a:hover {
  color: #f5821f;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.mrb-footer-custom .bs-footer-4-area .mrb-creole-credit:hover {
  color: #2d2d2d;
}

.mrb-footer-custom .bs-footer-4-area .mrb-creole-credit .mrb-heart {
  color: #ff3366;
  display: inline-block;
  margin: 0 2px;
}

/* Social links: Figma has an orange brand glyph followed by its name, not a
   button. The white circles this used to draw were the loudest thing in the
   bar and hid the labels the widget already outputs. */
.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 43px;
}

.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 25px;
  text-transform: capitalize;
  color: #2d2d2d;
  transition: color 0.3s ease;
}

.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link i,
.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link svg {
  color: #f5821f;
  fill: #f5821f;
  font-size: 16px;
  transition: color 0.3s ease;
}

.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link:hover,
.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link:hover i,
.mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link:hover svg {
  color: #f5821f;
  fill: #f5821f;
  background: transparent;
  transform: none;
  box-shadow: none;
}

 /* ==========================================================================
   Responsive
   ========================================================================== */

 /* 13"/14" laptops and below: tighten the two columns */
 @media (max-width: 1599px) {
   .mrb-footer-custom .mrb-footer-form {
     flex-basis: 560px;
   }

   .mrb-footer-custom .mrb-footer-form-title {
     font-size: 40px;
   }

   /* The theme's pt-130 / mb-125 utilities are sized for the 1920px Figma
     frame and were flat — the SAME 130px above the footer and 125px before
     the copyright bar at 1280px as at 1920px. On a 13" laptop (1280x800)
     that is ~255px of empty band inside the footer, a third of the viewport
     height, and the footer alone came to 913px.

     Both now use the site-wide page-edge value, exactly as the <=1199px
     block below already does, so the footer opens and closes on the same
     rhythm as every other section boundary on the site (80px here, then
     60px tablet / 40px phone). Above 1600px the Figma 130/125 stands. */
   .mrb-footer-custom .bs-footer-4-area {
     padding-top: var(--mrb-space-edge);
   }

   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-wrap {
     margin-bottom: var(--mrb-space-edge);
   }
 }

 @media (max-width: 1399px) {
   .mrb-footer-custom .mrb-footer-form {
     flex-basis: 480px;
   }
 }

 /* Tablet landscape / small laptop: form drops below the link columns */
 @media (max-width: 1199px) {

   /* The theme opens the footer with 130px of space and closes the column
     block with a 125px margin — sized for the two-column desktop layout.
     Stacked on a tablet they read as two large empty bands, and they were
     not even the same size. Both now use the site-wide page-edge value
     (60px tablet / 40px phone), so the footer opens and closes evenly. */
   .mrb-footer-custom .bs-footer-4-area {
     padding-top: var(--mrb-space-edge);
   }

   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-wrap {
     margin-bottom: var(--mrb-space-edge);
     flex-direction: column;
     gap: 50px;
   }

   .mrb-footer-custom .mrb-footer-form {
     flex-basis: auto;
     max-width: 613px;
   }

   .mrb-footer-custom .mrb-footer-form-title {
     font-size: 36px;
   }
 }

 /* Tablet and mobile: the copyright bar re-flows instead of stacking.
  *
  * It used to switch to a full column at 1024px, which produced three centred
  * decks — copyright, credit pill, social row — 197px tall inside a 961px
  * container holding 292px items. All width, no hierarchy, and the eye had
  * nothing to land on.
  *
  * Two changes. The column now starts at 991px rather than 1024px, because the
  * horizontal row still fits comfortably at 992–1024 (832px of content in
  * 929px of space) and there is no reason to break it early. And below that it
  * wraps rather than stacks: the copyright holds the left edge and the credit
  * the right, so the line spans the bar and the space between them does the
  * separating; the social icons take the line beneath, centred as a group.
  * That gives the bar a two-line silhouette with the icons — the only colour
  * in it — sitting on their own line where they read as the call to action.
  *
  * Phones drop to the centred stack in the 767px block below, where the two
  * texts no longer fit on one line. */
 @media (max-width: 991px) {
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-flex {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     gap: 16px 28px;
     text-align: left;
   }

   .mrb-footer-custom .bs-footer-4-area .mrb-creole-credit {
     text-align: right;
   }

   /* Always the last line, full width, so the icons centre against the bar
      rather than against whatever text shares their row. */
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social {
     order: 3;
     flex-basis: 100%;
     justify-content: center;
   }

   /* The bar is shorter now, so it can afford a little more breathing room
      above and below without growing past its old height. */
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright {
     padding-top: 30px;
     padding-bottom: 30px;
   }

   /* Comfortable touch targets on a device that is actually touched: the
      links are text now, so the height comes from padding rather than a box. */
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social .elm-link {
     min-height: 44px;
   }
 }

 /* Tablet portrait and phones */
 @media (max-width: 767px) {

   /* Too narrow to hold the copyright and the credit on one line, so the
      left/right split above stops meaning anything — everything recentres and
      the bar reads as a simple stack. */
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-flex {
     justify-content: center;
     text-align: center;
   }

   .mrb-footer-custom .bs-footer-4-area .mrb-creole-credit {
     text-align: center;
   }

   /* Top and bottom keep matching here too — 40px from --mrb-space-edge,
     inherited from the 1199px block above; only the column gap changes. */
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-wrap {
     gap: 36px;
   }

   /* tighter rhythm between stacked sections on phones */
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-logo {
     margin-bottom: 28px;
   }

   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-widget {
     gap: 28px 80px;
   }

   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-menu li {
     margin-bottom: 8px;
   }

   .mrb-footer-custom .mrb-footer-form-title {
     font-size: 28px;
     margin-bottom: 28px;
   }

   .mrb-footer-custom .mrb-footer-form input[type='text'],
   .mrb-footer-custom .mrb-footer-form input[type='tel'],
   .mrb-footer-custom .mrb-footer-form input[type='email'],
   .mrb-footer-custom .mrb-footer-form textarea {
     max-width: 100%;
   }

   .mrb-footer-custom .mrb-footer-form .mrb-ff-field {
     margin-bottom: 24px;
   }

   .mrb-footer-custom .mrb-footer-form input[type='submit'],
   .mrb-footer-custom .mrb-footer-form .wpcf7-submit {
     width: 100%;
   }

 }

 /* Small phones */
 @media (max-width: 575px) {
   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-menu li a {
     font-size: 16px;
   }

   .mrb-footer-custom .mrb-footer-form-title {
     font-size: 24px;
   }

   .mrb-footer-custom .bs-footer-4-area .bs-footer-4-copyright-social {
     flex-wrap: wrap;
     justify-content: center;
     gap: 14px;
   }
 }
/* ==========================================================================
   "Get In Touch" column — type steps
   Figma only draws 1920; the ramp below keeps a full postal address
   readable rather than page-filling on smaller screens.
   ========================================================================== */

@media (max-width: 1199px) {
  .mrb-footer-custom .bs-footer-4-contact .title {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .mrb-footer-custom .bs-footer-4-contact .title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  .mrb-footer-custom .bs-footer-4-contact .link-elm,
  .mrb-footer-custom .bs-footer-4-contact .disc-elm {
    font-size: 18px;
  }

  .mrb-footer-custom .bs-footer-4-contact .link-title:not(:first-child) {
    margin-top: 28px;
  }
}