/* ============================================================
   Mega menu, shared across every page.
   Dark glass panels by default (static pages, transparent-to-glass
   header). The homepage's warm sticky header uses the
   .bc-w-mega--warm variant. Injected/managed by nav.js on the
   static pages and rendered natively by 04-header.js on the
   homepage. Mobile (<=760px) uses the existing bc-w-mnav dialog,
   extended with .msub sub-links.
   ============================================================ */

/* Caret on nav parents that own a panel */
.bc-w-nav a[data-mega] { position: relative; padding-right: 15px; }
.bc-w-nav a[data-mega]::after {
  content: ""; position: absolute; right: 1px; top: 50%;
  width: 5.5px; height: 5.5px; margin-top: -4.5px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); opacity: .55;
  transition: transform .25s ease, margin-top .25s ease;
}
.bc-w-nav a[data-mega][aria-expanded="true"]::after { transform: rotate(225deg); margin-top: -1px; }

/* While a panel is open the static header takes its glass look even
   at the top of the page, so the panel never hangs off a transparent bar.
   The homepage header already has a solid warm background, so nav.js
   (static pages only) is the only thing that applies this class. */
.bc-w-header.mega-open {
  background: rgba(32,45,40,.9);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-bottom-color: rgba(191,164,111,.28);
}

/* ---- Panel shell ---- */
.bc-w-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none;
  background: rgba(32,45,40,.985);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(191,164,111,.28);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.bc-w-mega.open { display: block; animation: bcMegaIn .26s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bcMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bc-w-mega.open { animation: none; } }

.bc-w-mega .mg-in {
  max-width: 1240px; margin: 0 auto;
  padding: 34px 48px 40px;
  display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start;
}

/* ---- Links column ---- */
.mg-eyebrow {
  display: block; margin-bottom: 6px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(191,164,111,.85);
}
.mg-links a {
  display: block; padding: 13px 0;
  border-bottom: 1px solid rgba(224,213,196,.12);
}
.mg-links a:last-child { border-bottom: 0; }
.mg-links a strong {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 19px; line-height: 1.25; color: var(--beige);
  transition: color .22s ease;
}
.mg-links a span {
  display: block; margin-top: 3px;
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45;
  color: var(--beige-50);
}
.mg-links a:hover strong, .mg-links a:focus-visible strong { color: var(--gold); }

/* ---- CTA card ---- */
.mg-cta {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 26px 28px; border-radius: 18px;
  background: rgba(191,164,111,.08);
  border: 1px solid rgba(191,164,111,.32);
}
.mg-cta .mg-eyebrow { margin-bottom: 10px; }
.mg-cta strong {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.2; color: var(--beige);
}
.mg-cta a.mg-tel {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.2; color: var(--beige);
  transition: color .22s ease;
}
.mg-cta a.mg-tel:hover { color: var(--gold); }
.mg-cta p {
  margin: 8px 0 18px;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: var(--beige-50);
}
.mg-cta .bc-w-btn { padding: 11px 22px; font-size: 15px; }

/* ---- Warm variant (homepage header) ---- */
.bc-w-mega--warm {
  background: rgba(233,226,214,.99);
  border-bottom-color: rgba(133,114,77,.32);
  box-shadow: 0 30px 60px rgba(29,28,26,.14);
}
.bc-w-mega--warm .mg-eyebrow { color: var(--gold-dark, #85724D); }
.bc-w-mega--warm .mg-links a { border-bottom-color: rgba(29,28,26,.1); }
.bc-w-mega--warm .mg-links a strong { color: var(--brown, #1D1C1A); }
.bc-w-mega--warm .mg-links a span { color: rgba(29,28,26,.55); }
.bc-w-mega--warm .mg-links a:hover strong,
.bc-w-mega--warm .mg-links a:focus-visible strong { color: var(--gold-dark, #85724D); }
.bc-w-mega--warm .mg-cta { background: rgba(191,164,111,.14); border-color: rgba(133,114,77,.35); }
.bc-w-mega--warm .mg-cta strong, .bc-w-mega--warm .mg-cta a.mg-tel { color: var(--brown, #1D1C1A); }
.bc-w-mega--warm .mg-cta a.mg-tel:hover { color: var(--gold-dark, #85724D); }
.bc-w-mega--warm .mg-cta p { color: rgba(29,28,26,.55); }

/* ---- Narrow desktop ---- */
@media (max-width: 1030px) {
  .bc-w-mega .mg-in { padding: 26px 28px 30px; grid-template-columns: 1fr 300px; gap: 32px; }
}

/* ---- Mobile: panels off, bc-w-mnav dialog carries the extra links ---- */
@media (max-width: 760px) {
  .bc-w-mega { display: none !important; }
}
.bc-w-mnav nav a.msub {
  font-family: var(--font-sans); font-weight: 500; font-size: 16px;
  color: var(--w-ink-soft, rgba(29,28,26,.8));
  padding: 11px 2px 11px 18px;
  border-bottom: 1px solid var(--w-line, rgba(29,28,26,.12));
}
.bc-w-mnav .mguide {
  margin-top: 12px; justify-content: center;
  background: transparent; box-shadow: none;
  border: 1px solid var(--gold-dark, #85724D); color: var(--gold-dark, #85724D);
}
