/* Header chrome. Enqueued globally from inc/enqueue.php.
   Modernisation pass: the original was a 50px dark bar over an 80px header,
   130px of chrome before any content, with nav links that gave no feedback at
   all. This is lighter, sticky, and says where you are. */

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.jimibox-topbar {
  background: var(--jimibox-dark);
  color: var(--jimibox-dark-text);
  font-size: var(--jimibox-fs-small);
}

.jimibox-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--jimibox-topbar-height);
}

/* The top bar used to hold nothing but two icons and 50px of empty space.
   Putting the phone number and opening line in it makes the height earn its
   place — this is a storage yard, the number IS the call to action. */
.jimibox-topbar__contact {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.jimibox-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: color var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-topbar__link:hover { color: #fff; }
.jimibox-topbar__link .jimibox-icon { opacity: .7; }

.jimibox-topbar__note {
  color: var(--jimibox-dark-text);
  opacity: .8;
  white-space: nowrap;
}

.jimibox-topbar__actions { display: flex; align-items: center; gap: 6px; }

.jimibox-topbar__search-btn,
.jimibox-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: background var(--jimibox-dur) var(--jimibox-ease),
              color var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-topbar__search-btn { color: var(--jimibox-dark-text); }
.jimibox-topbar__search-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.jimibox-header__search-btn { color: var(--jimibox-text-muted); }
.jimibox-header__search-btn:hover { background: var(--jimibox-band); color: var(--jimibox-brand); }

/* The search panel drops out of whichever button opened it; both buttons
   target the same panel, so there is only ever one form in the DOM. */
.jimibox-topsearch {
  background: var(--jimibox-dark-2);
  padding: 14px 0;
}
.jimibox-topsearch[hidden] { display: none; }
.jimibox-topsearch form { display: flex; gap: 10px; align-items: stretch; }
.jimibox-topsearch label { flex: 1; display: block; }
.jimibox-topsearch input[type="search"],
.jimibox-topsearch input[type="text"] {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--jimibox-radius-sm);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.jimibox-topsearch input::placeholder { color: rgba(255,255,255,.5); }
.jimibox-topsearch button {
  padding: 11px 22px;
  border: 0;
  border-radius: var(--jimibox-radius-sm);
  background: var(--jimibox-brand-ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-topsearch button:hover { background: var(--jimibox-brand-ink-dark); }

/* Phones lose the top bar, as on the live site — but the number moves into the
   header rather than disappearing off the site entirely. */
@media (max-width: 767px) {
  .jimibox-topbar { display: none; }
}
@media (max-width: 900px) {
  .jimibox-topbar__note { display: none; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.jimibox-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--jimibox-dur) var(--jimibox-ease),
              box-shadow var(--jimibox-dur) var(--jimibox-ease);
}
/* Border and shadow appear only once the page has moved, so the header sits
   flush against the hero at rest. header.js sets .is-stuck. */
.jimibox-header.is-stuck {
  border-bottom-color: var(--jimibox-border-soft);
  box-shadow: 0 1px 16px -6px rgba(16,24,40,.2);
}

.jimibox-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--jimibox-header-height);
}

.jimibox-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--jimibox-font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--jimibox-heading);
}
.jimibox-header__logo img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  height: auto;
}

.jimibox-nav { margin-left: auto; }

.jimibox-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jimibox-nav__list li { margin: 0; }
.jimibox-nav__list a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: var(--jimibox-radius-sm);
  text-decoration: none;
  font-family: var(--jimibox-font-heading);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--jimibox-text);
  transition: color var(--jimibox-dur) var(--jimibox-ease),
              background var(--jimibox-dur) var(--jimibox-ease);
}
/* --brand-ink on both: nav labels are 15px, so small text at 4.5:1.
   #f75a00 measures 3.27:1 on white and 3.00:1 on the tint. */
.jimibox-nav__list a:hover { color: var(--jimibox-brand-ink); background: var(--jimibox-brand-tint); }

/* The current page is marked now. The old theme highlighted active items in
   sub-menus only, which meant this five-page site never showed you where you
   were — worth fixing rather than reproducing. */
.jimibox-nav__list .current-menu-item > a,
.jimibox-nav__list .current_page_item > a { color: var(--jimibox-brand-ink); }
/* The underline is a graphic, not text, so the 3:1 non-text bar applies and it
   keeps the brighter brand orange. Only the label had to darken. */
.jimibox-nav__list .current-menu-item > a::after,
.jimibox-nav__list .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--jimibox-brand);
}

.jimibox-header__actions { display: flex; align-items: center; gap: 8px; }

/* Phone CTA in the header, visible once the top bar is gone. */
.jimibox-header__call {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--jimibox-radius-sm);
  /* 15px white label — small text, so --brand-ink for 5.13:1. */
  background: var(--jimibox-brand-ink);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.jimibox-header__call:hover { background: var(--jimibox-brand-ink-dark); }

/* Burger — hidden on desktop. */
.jimibox-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--jimibox-radius-sm);
  cursor: pointer;
}
.jimibox-burger span {
  display: block;
  height: 2px;
  width: 22px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--jimibox-heading);
  transition: transform var(--jimibox-dur) var(--jimibox-ease),
              opacity var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jimibox-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.jimibox-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas drawer, slides in from the right. */
.jimibox-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, 88vw);
  z-index: 120;
  background: #fff;
  box-shadow: -20px 0 60px -20px rgba(16,24,40,.35);
  padding: 84px 26px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s var(--jimibox-ease);
}
.jimibox-drawer.is-open { transform: translateX(0); }

/* Scrim behind the drawer — the old one slid a white panel over live content
   with nothing between them. */
.jimibox-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(16,24,40,.45);
  opacity: 0;
  transition: opacity .28s var(--jimibox-ease);
}
.jimibox-scrim.is-open { opacity: 1; }

.jimibox-drawer__list { list-style: none; margin: 0; padding: 0; }
.jimibox-drawer__list li { border-bottom: 1px solid var(--jimibox-border-soft); margin: 0; }
.jimibox-drawer__list a {
  display: block;
  padding: 15px 4px;
  text-decoration: none;
  font-family: var(--jimibox-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--jimibox-heading);
  transition: color var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-drawer__list a:hover { color: var(--jimibox-brand); }
.jimibox-drawer__list .current-menu-item > a,
.jimibox-drawer__list .current_page_item > a { color: var(--jimibox-brand); }
.jimibox-drawer__list .sub-menu { list-style: none; margin: 0; padding-left: 16px; }
.jimibox-drawer__list .sub-menu a { font-size: .9375rem; font-weight: 500; color: var(--jimibox-text-muted); }

.jimibox-drawer__cta { margin-top: 26px; display: grid; gap: 10px; }
.jimibox-drawer__cta .jimibox-btn { width: 100%; }

@media (max-width: 900px) {
  .jimibox-nav { display: none; }
  .jimibox-burger { display: flex; }
  /* The nav carried margin-left:auto; hiding it would collapse the burger back
     next to the logo. Re-assert the push on the actions container. */
  .jimibox-header__actions { margin-left: auto; }
}
@media (max-width: 767px) {
  .jimibox-header__call { display: inline-flex; }
  .jimibox-header__search-btn { display: none; }
  .jimibox-header__inner { min-height: 64px; gap: 12px; }
  /* Cap the logo by WIDTH, not just height — the wordmark is wide and short, so
     a height cap alone still leaves ~215px of logo and squeezes the phone
     number out of the bar on exactly the devices most likely to tap it. */
  .jimibox-header__logo img { max-height: 34px; max-width: 148px; }
  .jimibox-header__call { font-size: .875rem; padding: 9px 12px; }
}
/* Below this the number genuinely will not fit beside the logo and burger. */
@media (max-width: 359px) {
  .jimibox-header__call span { display: none; }
  .jimibox-header__call { padding: 10px; }
}

/* --------------------------------------------------------------------------
   Social icon row — shared by the top bar and the footer.
   -------------------------------------------------------------------------- */

.jimibox-social { display: flex; align-items: center; gap: 8px; }
.jimibox-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: inherit;
  text-decoration: none;
  transition: background var(--jimibox-dur) var(--jimibox-ease),
              border-color var(--jimibox-dur) var(--jimibox-ease),
              color var(--jimibox-dur) var(--jimibox-ease),
              transform var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-social__link:hover {
  background: var(--jimibox-brand);
  border-color: var(--jimibox-brand);
  color: #fff;
  transform: translateY(-2px);
}
.jimibox-topbar__social .jimibox-social__link { width: 30px; height: 30px; }