/*
 * Header, mega menu and phone menu (templates/header.php).
 *
 * Plain CSS on purpose: the markup uses its own bih-* classes, so nothing
 * here depends on a Tailwind rebuild. Colours and type are the tokens from
 * tailwind.config.js.
 */

:root {
  --bih-paper: #F7F3EC;
  --bih-paper-raised: #EFE9DD;
  --bih-paper-deep: #E4DCCB;
  --bih-brand: #1E4D3B;
  --bih-brand-light: #2B6650;
  --bih-brand-dark: #143426;
  --bih-ink: #1A2A23;
  --bih-ink-soft: #4F6158;
  --bih-line: #DCD3C3;
  --bih-display: "Libre Caslon Text", Georgia, serif;
  --bih-sans: Figtree, system-ui, sans-serif;
  --bih-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Bar ─────────────────────────────────────────────────────────────── */

.bih {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  pointer-events: none;
  font-family: var(--bih-sans);
}

.bih-shell {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 10px 10px 0;
}

.bih-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  background: var(--bih-brand-dark);
  color: var(--bih-paper);
  box-shadow: 0 10px 30px -18px rgba(20, 52, 38, .55);
  transition: height .3s var(--bih-ease), box-shadow .3s var(--bih-ease), background-color .3s var(--bih-ease);
}

.bih.is-scrolled .bih-bar {
  background: rgba(20, 52, 38, .96);
  box-shadow: 0 18px 40px -20px rgba(20, 52, 38, .7);
}

.bih-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
}

.bih-logo {
  width: auto;
  height: 38px;
  flex-shrink: 0;
}

.bih-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.bih-brand-name {
  overflow: hidden;
  font-family: var(--bih-display);
  font-size: 1.0625rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bih-brand-kicker {
  display: none;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, .6);
  white-space: nowrap;
}

.bih-nav {
  display: none;
}

.bih-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* WhatsApp CTA: an icon disc on phones, a labelled pill from sm. */
.bih-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bih-paper);
  color: var(--bih-brand-dark);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s var(--bih-ease);
}

.bih-cta i {
  font-size: 1.25rem;
}

.bih-cta:hover {
  background: #fff;
}

.bih-cta-label {
  display: none;
}

.bih-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 14px;
  border: 1px solid rgba(247, 243, 236, .28);
  border-radius: 999px;
  background: transparent;
  color: var(--bih-paper);
  font: 600 .875rem/1 var(--bih-sans);
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.bih-menu-btn:hover {
  border-color: var(--bih-paper);
  background: rgba(247, 243, 236, .08);
}

.bih-burger {
  display: grid;
  gap: 5px;
  width: 18px;
}

.bih-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.bih-burger span:last-child {
  width: 12px;
  justify-self: end;
}

.bih a:focus-visible,
.bih button:focus-visible,
.bih-drawer a:focus-visible,
.bih-drawer button:focus-visible {
  outline: 2px solid #E9DFC8;
  outline-offset: 3px;
}

/* Narrow phones: the floating WhatsApp bubble and the menu sheet both carry
   the same action, so the bar keeps only the brand and the menu button. */
@media (max-width: 399px) {
  .bih-bar .bih-cta { display: none; }
}

@media (min-width: 400px) {
  .bih-brand-kicker { display: block; }
}

@media (min-width: 640px) {
  .bih-shell { padding: 14px 16px 0; }
  .bih-cta { padding: 0 18px; }
  .bih-cta-label { display: inline; }
  .bih-logo { height: 42px; }
}

/* ── Desktop: inline nav + mega panels ─────────────────────────────────── */

@media (min-width: 1024px) {
  .bih-shell { padding: 16px 32px 0; }
  .bih-bar { height: 72px; padding: 0 12px 0 22px; gap: 20px; }
  .bih.is-scrolled .bih-bar { height: 62px; }
  .bih-logo { height: 46px; }
  .bih.is-scrolled .bih-logo { height: 40px; }
  .bih-menu-btn { display: none; }

  .bih-nav { display: block; }

  .bih-nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bih-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(247, 243, 236, .82);
    font: 500 .875rem/1 var(--bih-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
  }

  .bih-nav-link:hover,
  .bih-nav-item.is-open > .bih-nav-link {
    color: var(--bih-paper);
    background: rgba(247, 243, 236, .1);
  }

  .bih-nav-link.is-current,
  .bih-nav-item.is-current > .bih-nav-link {
    color: var(--bih-paper);
  }

  .bih-nav-link.is-current::after,
  .bih-nav-item.is-current > .bih-nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #E9DFC8;
  }

  .bih-caret {
    width: 14px;
    height: 14px;
    transition: transform .25s var(--bih-ease);
  }

  .bih-nav-item.is-open .bih-caret {
    transform: rotate(180deg);
  }

  /* Mega panel: anchored to .bih-shell, the full width of the bar. */
  .bih-mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 32px;
    right: 32px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    overflow: hidden;
    border: 1px solid var(--bih-line);
    border-radius: 28px;
    background: var(--bih-paper);
    color: var(--bih-ink);
    box-shadow: 0 30px 60px -30px rgba(26, 42, 35, .45);
    transition: opacity .22s ease, transform .22s var(--bih-ease), visibility 0s linear .22s;
  }

  /* The gap between bar and panel still belongs to the hover target. */
  .bih-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
  }

  .bih-nav-item.is-open .bih-mega,
  html:not(.js) .bih-nav-item:hover .bih-mega,
  html:not(.js) .bih-nav-item:focus-within .bih-mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .22s ease, transform .22s var(--bih-ease), visibility 0s;
  }

  .bih-mega-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
    gap: 28px;
    padding: 24px;
  }

  .bih-mega-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--bih-brand);
    color: var(--bih-paper);
    text-decoration: none;
    isolation: isolate;
  }

  .bih-mega-feature img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--bih-ease);
  }

  .bih-mega-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(20, 52, 38, .05) 20%, rgba(20, 52, 38, .92) 100%);
  }

  .bih-mega-feature:hover img {
    transform: scale(1.04);
  }

  .bih-mega-feature-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
  }

  .bih-mega-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, .75);
  }

  .bih-mega-title {
    font-family: var(--bih-display);
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .bih-mega-text {
    font-size: .9375rem;
    line-height: 1.5;
    color: rgba(247, 243, 236, .85);
  }

  .bih-mega-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .875rem;
    font-weight: 600;
  }

  .bih-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .2s var(--bih-ease);
  }

  .bih-mega-feature:hover .bih-arrow {
    transform: translateX(3px);
  }

  .bih-mega-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bih;
  }

  .bih-mega-link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 12px 48px;
    border-radius: 14px;
    color: var(--bih-ink);
    text-decoration: none;
    transition: background-color .18s ease;
  }

  .bih-mega-link::before {
    counter-increment: bih;
    content: counter(bih, decimal-leading-zero);
    position: absolute;
    left: 14px;
    top: 14px;
    font-family: var(--bih-display);
    font-size: .8125rem;
    color: var(--bih-brand-light);
  }

  .bih-mega-link:hover,
  .bih-mega-link.is-current {
    background: var(--bih-paper-raised);
  }

  .bih-mega-link-title {
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.3;
  }

  .bih-mega-link.is-current .bih-mega-link-title {
    color: var(--bih-brand);
  }

  .bih-mega-link-text {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--bih-ink-soft);
  }

  .bih-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--bih-line);
    background: var(--bih-paper-raised);
    font-size: .875rem;
    color: var(--bih-ink-soft);
  }

  .bih-mega-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--bih-brand);
    text-decoration: none;
  }

  .bih-mega-foot a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .bih-drawer { display: none; }
}

@media (min-width: 1280px) {
  .bih-nav-link { padding: 0 14px; font-size: .9375rem; }
  .bih-mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Between 1024 and 1180 seven links, the brand and the CTA do not fit:
   the CTA drops to its icon. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .bih-cta { padding: 0 12px; }
  .bih-cta-label { display: none; }
  .bih-brand-kicker { display: none; }
  .bih-nav-link { padding: 0 10px; }
}

/* ── Phone menu: full-screen sheet ─────────────────────────────────────── */

.bih-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .45s;
}

.bih-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.bih-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bih-brand-dark);
  color: var(--bih-paper);
  font-family: var(--bih-sans);
  clip-path: circle(0 at calc(100% - 52px) 40px);
  transition: clip-path .45s var(--bih-ease);
}

.bih-drawer.is-open .bih-sheet {
  clip-path: circle(150% at calc(100% - 52px) 40px);
  transition: clip-path .5s var(--bih-ease);
}

.bih-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 80px;
  padding: 0 18px 0 22px;
  flex-shrink: 0;
}

.bih-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid rgba(247, 243, 236, .28);
  border-radius: 999px;
  background: transparent;
  color: var(--bih-paper);
  font: 600 .875rem/1 var(--bih-sans);
  cursor: pointer;
}

.bih-close svg {
  width: 18px;
  height: 18px;
}

.bih-sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 22px 24px;
}

.bih-sheet-body > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s var(--bih-ease);
}

.bih-drawer.is-open .bih-sheet-body > * {
  opacity: 1;
  transform: none;
  transition-delay: .15s;
}

.bih-drawer.is-open .bih-sheet-body > * + * {
  transition-delay: .22s;
}

.bih-acc,
.bih-acc ul,
.bih-tiles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bih-acc-item {
  border-bottom: 1px solid rgba(247, 243, 236, .14);
}

.bih-acc-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bih-paper);
  text-align: left;
  cursor: pointer;
}

.bih-acc-num {
  font-family: var(--bih-display);
  font-size: .875rem;
  color: rgba(247, 243, 236, .5);
}

.bih-acc-label {
  flex: 1;
  font-family: var(--bih-display);
  font-size: 1.625rem;
  line-height: 1.15;
}

.bih-acc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(247, 243, 236, .1);
  font-size: .75rem;
  font-weight: 600;
}

.bih-acc-btn .bih-caret {
  width: 20px;
  height: 20px;
  transition: transform .25s var(--bih-ease);
}

.bih-acc-btn[aria-expanded="true"] .bih-caret {
  transform: rotate(180deg);
}

.bih-acc-item.is-current .bih-acc-label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background: #E9DFC8;
}

.bih-acc-panel {
  padding: 0 0 18px;
}

.bih-acc-hub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bih-paper);
  color: var(--bih-brand-dark);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}

.bih-acc-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 16px;
  border-radius: 12px;
  color: var(--bih-paper);
  text-decoration: none;
}

.bih-acc-link:hover,
.bih-acc-link.is-current {
  background: rgba(247, 243, 236, .08);
}

.bih-acc-link-title {
  font-weight: 600;
  font-size: 1rem;
}

.bih-acc-link-text {
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(247, 243, 236, .62);
}

.bih-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.bih-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(247, 243, 236, .18);
  border-radius: 16px;
  color: var(--bih-paper);
  font-weight: 600;
  text-decoration: none;
}

.bih-tile .bih-arrow,
.bih-acc-hub .bih-arrow {
  width: 16px;
  height: 16px;
}

.bih-tile.is-current {
  background: rgba(247, 243, 236, .1);
  border-color: rgba(247, 243, 236, .4);
}

.bih-sheet-foot {
  flex-shrink: 0;
  padding: 16px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(247, 243, 236, .14);
  background: rgba(0, 0, 0, .12);
}

.bih-sheet-note {
  margin: 0 0 10px;
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(247, 243, 236, .65);
  text-align: center;
}

.bih-sheet-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 999px;
  background: var(--bih-paper);
  color: var(--bih-brand-dark);
  font-weight: 700;
  text-decoration: none;
}

.bih-sheet-cta i {
  font-size: 1.375rem;
}

.bih-sheet-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-top: 12px;
}

.bih-sheet-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: .8125rem;
  color: rgba(247, 243, 236, .78);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .bih-bar,
  .bih-mega,
  .bih-sheet,
  .bih-sheet-body > *,
  .bih-caret,
  .bih-arrow,
  .bih-mega-feature img {
    transition: none !important;
  }
}