/* ---------------------------------------------------------------
   Footer — brand column, links, live categories, contact block,
   plus the floating WhatsApp button.
   --------------------------------------------------------------- */

.jb-footer {
  margin-top: var(--jb-s8);
  background: var(--jb-ink);
  color: var(--jb-300);
  font-size: var(--jb-fs-sm);
  flex-shrink: 0; /* Prevent footer from collapsing on short pages */
}

/* Hazard stripe across the top — same amber cue as the wordmark. */
.jb-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--jb-amber) 0 14px,
    var(--jb-ink-2) 14px 28px
  );
}

.jb-footer__grid {
  display: grid;
  gap: var(--jb-s6);
  padding-block: var(--jb-s7);
}
@media (min-width: 640px) {
  .jb-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .jb-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--jb-s7);
  }
}

/* ---------- Brand column ---------- */

.jb-footer__name {
  display: block;
  font-family: var(--jb-font-display);
  font-size: 1.4rem;
  font-weight: var(--jb-display-weight);
  letter-spacing: var(--jb-display-tracking);
  text-transform: uppercase;
  color: var(--jb-white);
}
.jb-footer__slogan {
  display: block;
  margin-top: var(--jb-s1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jb-amber);
}
.jb-footer__blurb {
  margin: var(--jb-s4) 0 0;
  max-width: 42ch;
  line-height: 1.65;
  color: var(--jb-500);
}

/* ---------- Headings + link lists ---------- */

.jb-footer__heading {
  margin: 0 0 var(--jb-s4);
  font-size: var(--jb-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jb-white);
}

.jb-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--jb-s2);
}
.jb-footer__list a {
  color: var(--jb-300);
  transition: color .15s ease, padding-inline-start .15s ease;
}
.jb-footer__list a:hover {
  color: var(--jb-amber);
  padding-inline-start: 4px;
}

/* ---------- Contact ---------- */

.jb-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--jb-s3);
  margin: 0 0 var(--jb-s3);
  line-height: 1.5;
}
.jb-contact-item .jb-icon {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--jb-amber);
}
.jb-contact-item a { color: var(--jb-300); transition: color .15s ease; }
.jb-contact-item a:hover { color: var(--jb-amber); }
.jb-contact-item__stack { display: grid; gap: 2px; }

/* Generic button — amber, used on the 404 and by later sections.
   border: 0 matters: on an <a> there is nothing to reset, but a <button>
   carries the browser's own default border, so the same class rendered
   outlined on the Apply and Send enquiry buttons and flat everywhere else. */
.jb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--jb-s2);
  padding: 11px var(--jb-s5);
  border: 0;
  border-radius: var(--jb-radius);
  background: var(--jb-amber);
  color: var(--jb-ink);
  font-weight: 700;
  font-size: var(--jb-fs-sm);
  transition: background .15s ease, transform .15s ease;
}
.jb-btn:hover { background: var(--jb-amber-dark); transform: translateY(-1px); }

/* ---------- Social ---------- */

.jb-social {
  display: flex;
  gap: var(--jb-s2);
  margin: var(--jb-s5) 0 0;
  padding: 0;
  list-style: none;
}
.jb-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--jb-ink-3);
  border-radius: var(--jb-radius);
  color: var(--jb-300);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.jb-social a:hover {
  background: var(--jb-amber);
  border-color: var(--jb-amber);
  color: var(--jb-ink);
}

/* ---------- Bottom bar ---------- */

.jb-footer__bar {
  border-top: 1px solid var(--jb-ink-3);
  font-size: var(--jb-fs-xs);
  color: var(--jb-500);
}
.jb-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jb-s2);
  padding-block: var(--jb-s4);
}
.jb-footer__bar p { margin: 0; }

/* ---------- Floating WhatsApp ---------- */

.jb-wa-float {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--jb-s2);
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--jb-green);
  color: #06331a;
  font-weight: 700;
  font-size: var(--jb-fs-sm);
  box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  transition: transform .15s ease, box-shadow .15s ease;
}
.jb-wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
}
.jb-wa-float .jb-icon { width: 22px; height: 22px; }

/* Icon-only on phones; the label would crowd a small screen. With the label
   gone the pill's uneven padding left it 54x48 — an oval, not a circle — so
   pin it to a square at that size. */
.jb-wa-float__label { display: none; }
@media (max-width: 639px) {
  .jb-wa-float {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
  }
}
@media (min-width: 640px) { .jb-wa-float__label { display: inline; } }

/* ---------- Minimal entry styles (placeholder until later steps) ---------- */

.jb-entry__title {
  font-family: var(--jb-font-display);
  font-weight: var(--jb-display-weight);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  letter-spacing: var(--jb-display-tracking);
  margin-block: 0 var(--jb-s4);
}
.jb-entry__content { max-width: 70ch; }