/* Footer chrome. Enqueued globally from inc/enqueue.php.

   Modernisation pass. The original was four equal columns of centred 24px/400
   Raleway titles, each with a 60px hairline under it — a very recognisable
   2014 Kadence footer. This keeps the same four columns and the same content,
   but ranges them left, gives the brand column the room it needs, and drops
   the hairlines for a short brand rule on the titles only. */

.jimibox-footer {
  background: var(--jimibox-dark);
  color: var(--jimibox-dark-text);
  padding-top: clamp(48px, 6vw, 76px);
  font-size: var(--jimibox-fs-body);
}

.jimibox-footer__inner {
  display: grid;
  /* The brand column carries the logo, social and the full address, so it gets
     more room than the three media columns rather than an equal quarter. */
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.jimibox-footer__col { min-width: 0; }

.jimibox-footer__title {
  margin: 0 0 1.1em;
  font-family: var(--jimibox-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jimibox-dark-heading);
}
.jimibox-footer__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: .7em;
  border-radius: 2px;
  background: var(--jimibox-brand);
}

.jimibox-footer__media {
  border-radius: var(--jimibox-radius-sm);
  width: 100%;
}

.jimibox-footer__logo { display: block; margin-bottom: 22px; }
.jimibox-footer__logo img {
  max-width: 210px;
  /* The logo is black artwork on transparent and would disappear into the dark
     band. `brightness(0) invert(1)` flattens it to solid white first, which is
     the standard dark-footer treatment.

     NOT plain `invert(1)`: inverting the artwork also inverts the orange dot in
     the O, which comes out cyan. Losing the dot's colour is the right trade —
     a white wordmark reads as deliberate, a cyan dot reads as a bug. If Jim
     wants the orange kept, the answer is a proper reversed logo file in Site
     Options → Footer columns → Footer logo, not a cleverer filter. */
  filter: brightness(0) invert(1);
}

.jimibox-footer__name {
  display: block;
  font-family: var(--jimibox-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--jimibox-dark-heading);
  margin-bottom: 18px;
}

.jimibox-footer__tagline { margin: 0 0 18px; max-width: 34ch; }

.jimibox-social--footer { margin-bottom: 24px; }

.jimibox-footer__map {
  aspect-ratio: 4 / 3;
  max-height: 260px;
  border-radius: var(--jimibox-radius-sm);
  overflow: hidden;
}
.jimibox-footer__map iframe { width: 100%; height: 100%; display: block; border: 0; }

/* --------------------------------------------------------------------------
   vCard — address, mobile, landline, email
   -------------------------------------------------------------------------- */

.jimibox-vcard { font-size: .9375rem; line-height: 1.6; }
.jimibox-vcard__line {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 12px;
}
.jimibox-vcard__line:last-child { margin-bottom: 0; }
.jimibox-vcard__line a {
  text-decoration: none;
  transition: color var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-vcard__line a:hover { color: var(--jimibox-brand); }
.jimibox-vcard .jimibox-icon {
  flex: none;
  margin-top: 4px;
  color: var(--jimibox-brand);
}

/* --------------------------------------------------------------------------
   Credits bar
   -------------------------------------------------------------------------- */

.jimibox-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
  padding-bottom: 26px;
  border-top: 1px solid rgba(255,255,255,.09);
}

/* Credit text sits left, the nav right — the reverse of the source order,
   which puts the nav first so it is reachable before the fine print. */
.jimibox-footer__credit {
  order: -1;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--jimibox-dark-text);
  opacity: .75;
}
.jimibox-footer__credit a { text-decoration: none; }
.jimibox-footer__credit a:hover { color: var(--jimibox-brand); }

.jimibox-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .875rem;
}
.jimibox-footer__legal-list li { margin: 0; }
.jimibox-footer__legal-list a {
  text-decoration: none;
  transition: color var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-footer__legal-list a:hover { color: var(--jimibox-brand); }

@media (max-width: 991px) {
  .jimibox-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .jimibox-footer__inner { grid-template-columns: 1fr; }
  .jimibox-footer__legal { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Pre-footer band
   The live site has no such band, so the Site Options toggle ships OFF. It is
   styled anyway: the toggle is in the client's hands, and an unstyled strip
   appearing the first time they flip it would be a defect we shipped.
   -------------------------------------------------------------------------- */

/* --brand-ink: the band carries body-sized white text, which is 3.27:1 on
   #f75a00 and 5.13:1 on #c04500. */
.jimibox-prefooter { background: var(--jimibox-brand-ink); color: #fff; }
.jimibox-prefooter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(32px, 4vw, 52px);
}
.jimibox-prefooter h2 { color: #fff; margin: 0 0 .3em; }
.jimibox-prefooter p { margin: 0; opacity: .92; }
.jimibox-prefooter .jimibox-btn { background: #fff; color: var(--jimibox-brand-ink); }
.jimibox-prefooter .jimibox-btn:hover { background: var(--jimibox-dark); color: #fff; box-shadow: none; }