/* ============================================================
   JCU Menu Search Overlay — production styles
   ============================================================
   Component styling matches the approved reference demo
   (demo/jcu-menu-search-live.html) verbatim — that's the design source of
   truth. Only the SEARCH-MODE LAYOUT rules below (Part 1) are new: they slot
   the standalone overlay into the real mega menu (hide the right-column nav,
   let the menu's own scroll handle overflow; the left highlights column is
   left untouched). The .ms__* component rules (Part 2) are the demo's.
   ============================================================ */

/* ── Part 1. Search-mode layout in the real menu ───────────── */
.ms { display: none; }

.menu.jcu-search-active .ms {
  display: block;
  /* .menu__search already adds margin-block-end: 1.25rem above; no top pad. */
  padding: 0 0 1.25rem;
  font-family: "Figtree", Tahoma, Verdana, "Segoe", sans-serif;
}

/* Search only transforms the RIGHT column (.menu__primary): the nav is
   replaced by the results. Everything else — including the LEFT highlights
   column (.menu__secondary, "Cookout on The Quad" / "Virtual Tour") — is
   deliberately left untouched: same look, full opacity, still clickable. */
.menu.jcu-search-active .menu__task-nav,
.menu.jcu-search-active .menu__main-nav,
.menu.jcu-search-active .menu__primary-columns {
  display: none;
}

/* With the task nav ("Next Steps") hidden, the search field rises to the top
   of the primary column — the same row as the menu's own gold close button
   (position:absolute, top-right, ~67px wide, offset down by its own
   padding-block-start). Reserve space on the right so the field doesn't run
   under the X, and nudge the field down so its top lines up with the button
   (also gives the field a little breathing room from the panel's top edge). */
.menu.jcu-search-active .menu__search {
  margin-block-start: clamp(0.375rem, 0.1rem + 1vw, 1.125rem);
  margin-inline-end: clamp(5rem, 3rem + 4vw, 6.5rem);
}

/* Drop the harsh browser focus ring the search reset draws inside the field
   ([type=search]{outline-offset:-2px}); use a gold ring on the field itself
   (matches the approved demo) plus the field's native white-fill + shadow. */
.menu.jcu-search-active .site-search__input:focus {
  outline: none;
}
.menu.jcu-search-active .site-search__field:has(.site-search__input:focus) {
  box-shadow: 0 0 0 2px #e8b720, 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ── Part 2. Result component (verbatim from the demo) ─────── */
.ms__section { margin-bottom: 1.5rem; }
.ms__section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ms__section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #e8b720; }
.ms__section-clear {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: #f2f2f2; border: none; border-radius: 50%; cursor: pointer;
}
.ms__section-clear:hover { background: #e0e0e0; }
.ms__section-clear svg { width: 8px; height: 8px; stroke: #999; stroke-width: 3; fill: none; }

/* Clive slot */
.ms__clive {
  padding: 0.85rem 1rem; margin-bottom: 1.5rem;
  background: #e4f1f7; border-radius: 8px; border: 1px solid #cce5f0;
}
.ms__clive-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #0e4168; margin-bottom: 0.6rem; }
.ms__clive-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ms__clive-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600;
  color: #0e4168; background: #fff; border: 1px solid #b8d9ec;
  border-radius: 6px; text-decoration: none; transition: all 0.15s ease;
}
.ms__clive-link:hover { background: #0e4168; color: #fff; border-color: #0e4168; }
.ms__clive-link svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Recent searches */
.ms__recent-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ms__recent-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.65rem; font-size: 0.82rem; font-weight: 500;
  color: #555; background: #f5f5f5; border: 1px solid #e5e5e5;
  border-radius: 100px; cursor: pointer; font-family: inherit;
  transition: all 0.15s ease;
}
.ms__recent-btn:hover { background: #eee; color: #001835; border-color: #ccc; }
.ms__recent-btn svg { width: 12px; height: 12px; stroke: #999; stroke-width: 2; fill: none; }

/* Popular pills */
.ms__pop-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ms__pop-link {
  display: inline-block; padding: 0.35rem 0.7rem;
  font-size: 0.82rem; font-weight: 500; color: #0e4168;
  border: 1px solid #d0d8e0; border-radius: 100px; text-decoration: none;
  transition: all 0.15s ease;
}
.ms__pop-link:hover { background: #0e4168; color: #fff; border-color: #0e4168; }

/* Most viewed */
.ms__mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.ms__mv-item { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0; }
.ms__mv-num { font-size: 0.75rem; font-weight: 600; color: #ccc; min-width: 1.3em; text-align: right; }
.ms__mv-link {
  font-size: 0.84rem; color: #0e4168; text-decoration: none; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms__mv-link:hover { text-decoration: underline; }
@media (max-width: 31.1875rem) { .ms__mv-grid { grid-template-columns: 100%; } }

/* Result count */
.ms__count {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #e8b720; margin-bottom: 0.75rem;
}
.ms__count-clear {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: #f2f2f2; border: none; border-radius: 50%; cursor: pointer;
}
.ms__count-clear:hover { background: #e0e0e0; }
.ms__count-clear svg { width: 8px; height: 8px; stroke: #999; stroke-width: 3; fill: none; }

/* Category pills */
.ms__cats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.ms__cat {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.65rem; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #555; background: #f5f5f5; border: 1px solid #e5e5e5;
  border-radius: 100px; cursor: pointer; transition: all 0.15s ease;
  white-space: nowrap; font-family: inherit;
}
.ms__cat:hover { background: #e8e8e8; color: #001835; }
.ms__cat.is-active { background: #0e4168; border-color: #0e4168; color: #fff; }
.ms__cat-n { font-weight: 400; color: #999; font-size: 0.65rem; }
.ms__cat.is-active .ms__cat-n { color: rgba(255, 255, 255, 0.6); }

/* Result list */
.ms__list { list-style: none; padding: 0; margin: 0; }
.ms__item { border-bottom: 1px solid #f0f0f0; }
.ms__item-link { display: block; padding: 0.7rem 0; text-decoration: none; transition: opacity 0.1s ease; }
.ms__item-link:hover { opacity: 0.7; }
.ms__item-link.is-focused { background: #e4f1f7; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 4px; }
.ms__item-title { font-size: 0.95rem; font-weight: 700; color: #001835; margin-bottom: 0.15rem; }
.ms__item-desc { font-size: 0.8rem; color: #666; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms__item-url { font-size: 0.72rem; color: #0e4168; margin-top: 0.15rem; opacity: 0.5; }
.ms__empty { text-align: center; padding: 2rem 1rem; color: #999; font-size: 0.9rem; }
.ms__empty strong { display: block; color: #555; font-size: 1rem; margin-bottom: 0.35rem; }

/* Pagination */
.ms__pager { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #f0f0f0; }
.ms__pager-btn {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.4rem; font-family: inherit; font-size: 0.8rem; font-weight: 600;
  color: #666; background: #f5f5f5; border: 1px solid #e5e5e5;
  border-radius: 5px; cursor: pointer; transition: all 0.15s ease;
}
.ms__pager-btn:hover { background: #e8e8e8; color: #001835; }
.ms__pager-btn.is-active { background: #0e4168; border-color: #0e4168; color: #fff; }
.ms__pager-btn.is-disabled { opacity: 0.25; pointer-events: none; }
.ms__pager-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.ms__pager-info { font-size: 0.75rem; color: #ccc; margin: 0 0.15rem; }