/* ═══════════ SITE NAV, MOBILE NAV + POPUP FIXES ═══════════
   Shared by every page with the main nav (home, about, cats, events, event,
   shop, product, faq). Loaded after each page's own styles so it wins.

   On phones and small tablets the tab list used to be hidden with no working
   way to open it (the ☰ toggled it inline, inside a bar with no room), and on
   the homepage the ☰ was pushed off the right edge altogether. Here it opens
   a full-width panel under the bar instead. */
@media (max-width: 1020px) {
  nav .hamburger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px; padding: 0;
    font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer;
    color: #1C1812 !important; -webkit-tap-highlight-color: transparent;
  }
  nav .nav-menu { display: none !important; }
  nav .nav-menu.open {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; left: 0; right: 0; top: var(--cl-nav-bottom, 88px);
    max-height: calc(100vh - var(--cl-nav-bottom, 88px));
    max-height: calc(100dvh - var(--cl-nav-bottom, 88px));
    overflow-y: auto; margin: 0; padding: 6px 22px 22px; list-style: none;
    background: #FAF8F3; border-bottom: 1px solid rgba(212,175,67,.35);
    box-shadow: 0 18px 30px rgba(28,24,18,.14); z-index: 200;
  }
  nav .nav-menu.open .nav-item > a {
    display: block; padding: 15px 2px; font-size: 17px; color: #1C1812 !important;
    border-bottom: 1px solid rgba(28,24,18,.08) !important;
  }
  nav .nav-menu.open .nav-item.on > a { color: #9A7820 !important; }
  nav .nav-menu.open .nav-item:last-child > a { border-bottom: 0 !important; }
  nav .nav-menu.open .nav-item > a::after { display: none !important; }
  nav .nav-menu.open .dropdown-panel { display: none !important; }
  nav .nav-menu.open .cl-mobile-extra > a { font-size: 15px; color: #6E665B !important; }
  body.cl-menu-open { overflow: hidden; }
}

/* Small phones: keep the bar to logo, Book a Visit, bag and ☰. */
@media (max-width: 600px) {
  nav .nav-inner { padding: 0 16px !important; gap: 10px; }
  nav .nav-left { gap: 0 !important; min-width: 0; }
  nav .nav-logo img { height: 46px !important; }
  nav .nav-right { gap: 8px !important; flex-shrink: 0; }
  nav .nav-right a.plain, nav .team-menu { display: none !important; }
  nav .nav-cta { padding: 10px 16px !important; font-size: 12.5px !important; white-space: nowrap; }
  nav .cart-btn { width: 40px; height: 40px; }
}

/* ── popups: always closable with a thumb ──────────────────────────────
   The close button was a 21px glyph tucked in the panel's corner, and it
   scrolled away with the content. On phones it is a 44px circle that stays
   pinned to the top of the panel however far down you scroll. */
@media (max-width: 600px) {
  #cl-events-overlay, #cl-nl-overlay { padding: 14px !important; }
  .evx-panel {
    max-height: calc(100vh - 28px) !important; max-height: calc(100dvh - 28px) !important;
    padding: 0 18px 22px !important;
  }
  .clnl-panel { padding: 0 20px 24px !important; }
  .evx-close, .clnl-close {
    position: sticky !important; top: 0; z-index: 5;
    display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 8px -10px -10px auto; padding: 0;
    border-radius: 50%; background: rgba(0,0,0,.45) !important; color: #F6F2E9 !important;
    font-size: 20px !important; line-height: 1;
  }
  .clnl-close { position: relative !important; }
  .evx-heading { font-size: 25px !important; }
  .evx-go h3 { font-size: 28px !important; }
  .evx-skip { padding: 12px 18px; font-size: 13px !important; }
  .evx-arrow { width: 44px !important; height: 44px !important; }
}

/* Phone-only links in the main menu (Contact, Join our team, Newsletter):
   never shown in the desktop bar. */
nav .nav-menu .cl-mobile-extra { display: none; }
@media (max-width: 1020px) {
  nav .nav-menu.open .cl-mobile-extra { display: block; }
}

/* ── About dropdown on pages without one of their own (desktop) ── */
nav .cl-dd {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #FAF8F3; border-bottom: 1px solid rgba(212,175,67,.35);
  padding: 30px 40px 36px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s; pointer-events: none;
  box-shadow: 0 18px 30px rgba(28,24,18,.08);
}
nav .cl-has-dd.cl-dd-open .cl-dd { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
nav .cl-dd-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #6E665B; margin: 0 0 16px; }
nav .cl-dd ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 56px; margin: 0; padding: 0; }
nav .cl-dd a { font-size: 15px; color: #1C1812; text-decoration: none; }
nav .cl-dd a:hover { color: #9A7820; }
@media (max-width: 1020px) { nav .cl-dd { display: none !important; } }

/* ── Footer logo: the trimmed artwork, at a size you can read ── */
footer .f-brand img { height: 92px !important; width: auto; max-width: 100%; }
@media (max-width: 600px) { footer .f-brand img { height: 76px !important; } }

/* ── Join our team lightbox ── */
#cl-join {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(24,28,20,.66); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
#cl-join.on { opacity: 1; }
#cl-join[hidden] { display: none; }
.clj-panel {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 36px); overflow-y: auto;
  background: #2F3529; color: #F6F2E9; border: 1px solid rgba(212,175,67,.35); border-radius: 6px;
  padding: 0 34px 32px; box-shadow: 0 30px 70px rgba(0,0,0,.45); text-align: center;
}
.clj-close {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 10px -18px -6px auto; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #F6F2E9; font-size: 19px; cursor: pointer;
}
.clj-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #D4AF43; margin: 4px 0 10px; }
.clj-h { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0 0 12px; color: #F6F2E9; }
.clj-h em { font-style: italic; color: #D4AF43; }
.clj-q { font-size: 24px; }
.clj-p { font-size: 14.5px; line-height: 1.7; color: rgba(242,237,226,.78); margin: 0 auto 20px; max-width: 40ch; }
.clj-opts { display: grid; gap: 10px; margin: 6px 0 4px; }
.clj-opt {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 15px;
  background: rgba(246,242,233,.06); border: 1px solid rgba(212,175,67,.4); color: #F6F2E9; transition: background .15s, border-color .15s;
}
.clj-opt:hover { border-color: #D4AF43; }
.clj-opt.on { background: #D4AF43; color: #262B21; border-color: #D4AF43; }
.clj-go {
  display: inline-block; min-height: 46px; padding: 13px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: #D4AF43; color: #262B21; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.clj-go:disabled { opacity: .45; cursor: default; }
.clj-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.clj-back { background: none; border: 0; color: rgba(242,237,226,.6); font: inherit; font-size: 13px; cursor: pointer; padding: 10px 0; min-height: 44px; }
body.cl-join-open { overflow: hidden; }
@media (max-width: 600px) { .clj-panel { padding: 0 20px 24px; } .clj-h { font-size: 25px; } .clj-q { font-size: 21px; } }