/* --------------------------------------------------------------------------- * Cosmick Areas Served — AJAX breed submenus + legacy Bootstrap quick-menu. * * Primary: a floating `.cas-breeds-panel` anchored to any menu

whose * carries `data-cas-area-id`. Works in any theme / any walker. * * Secondary (legacy, below): `.quick-menu` Bootstrap 5 rules kept for themes * that render nav in Bootstrap markup. Scoped to `.quick-menu*` classes so * they don't leak into non-Bootstrap themes. * -------------------------------------------------------------------------- */ /* ---- AJAX breed panel (theme-agnostic) --------------------------------- */ li.cas-area-item { position: relative; } .cas-breeds-panel { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); z-index: 9999; } .cas-breeds-panel li { list-style: none; margin: 0; } .cas-breeds-panel li > a { display: block; padding: 8px 14px; color: inherit; text-decoration: none; white-space: normal; line-height: 1.35; } .cas-breeds-panel li > a:hover, .cas-breeds-panel li > a:focus { background: rgba(0, 0, 0, 0.05); text-decoration: none; } .cas-breeds-panel .cas-breeds-status { padding: 10px 14px; color: #666; font-size: 0.95em; font-style: italic; } .cas-breeds-panel[aria-busy="true"] .cas-breeds-status::after { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -0.15em; animation: cas-spin 0.7s linear infinite; } @keyframes cas-spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .cas-breeds-panel { left: 0; right: 0; max-width: none; width: 100%; } } /* ---- Legacy Bootstrap quick-menu (opt-in) ------------------------------ */ .quick-menu-wrapper { overflow-x: auto; overflow-y: visible; } .quick-menu { flex-wrap: nowrap; overflow: visible; } @media (min-width: 992px) { .quick-menu-wrapper { overflow: visible; } .quick-menu .dropend:hover > .dropdown-menu { display: block; margin-top: 0; } .quick-menu .dropend > .dropdown-menu { top: 0; left: 100%; } } @media (max-width: 991.98px) { .quick-menu > li.dropdown > .dropdown-menu, .quick-menu-popup { max-width: calc(100vw - 16px); } /* When portaled to the menu's own containing block is the viewport, so Bootstrap's `min-width: 100%` becomes 100vw and overrides max-width. Force an explicit viewport-relative width. */ .quick-menu-popup { min-width: 0; width: calc(100vw - 16px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* L1 — parent rows (city list). Bold so they read as parent headings. */ .quick-menu-popup > li.dropend > .dropdown-toggle { font-weight: 600; padding: 0.5rem 1rem; } .quick-menu .dropdown-item, .quick-menu-popup .dropdown-item { white-space: normal; word-break: break-word; } /* L3 — nested child list. Tinted bg + primary-colored left rail so the nesting is obvious against the white parent surface. Uses --cas-primary when available (plugin exposes this) with a fallback. */ .quick-menu .dropend > .dropdown-menu, .quick-menu-popup .dropend > .dropdown-menu { position: static; float: none; width: auto; margin: 0.25rem 0.5rem 0.5rem 1rem; padding: 0.25rem 0 0.25rem 0.75rem; border: 0; border-left: 3px solid var(--cas-primary, var(--bs-primary, #018c6e)); border-radius: 0; box-shadow: none; background-color: rgba(0, 0, 0, 0.04); } .quick-menu-popup .dropend > .dropdown-menu .dropdown-item { padding: 0.375rem 0.5rem; font-size: 0.95em; } .quick-menu .dropend.show > .dropdown-menu, .quick-menu-popup .dropend.show > .dropdown-menu { display: block; } .quick-menu .dropend > .dropdown-toggle::after, .quick-menu-popup .dropend > .dropdown-toggle::after { float: right; margin-top: 0.6em; transition: transform 0.15s ease-in-out; } .quick-menu .dropend.show > .dropdown-toggle::after, .quick-menu-popup .dropend.show > .dropdown-toggle::after { transform: rotate(-90deg); } }