/* Vores Kalundborg — Live search dropdown * Renders under .nav-search input in site-header. Uses brand tokens fallbacks. */ :root{ --vk-sd-cream:#F5EFE2; --vk-sd-cream-2:#ECE4D1; --vk-sd-dark:#1F2A24; --vk-sd-body:#3D4642; --vk-sd-muted:#7B827D; --vk-sd-border:#E2D9C4;--vk-sd-border-strong:#D0C5AA; --vk-sd-sage:#6A8E5C; --vk-sd-sage-hover:#587A4B; --vk-sd-red:#A83232; --vk-sd-teal:#4E7C78; } /* Pill-shaped focus-ring: tegnes på selve form-pill'en (via :focus-within), * ikke på input-rektanglen indeni — så ringen matcher pill-formen. * Override af global input:focus-visible-regel i tokens.css §1587. */ form.nav-search input[type="search"]:focus, form.nav-search input[type="search"]:focus-visible, form.nav-search.is-open input[type="search"]{ outline: 0; box-shadow: none; } form.nav-search:focus-within{ border-color: var(--vk-sd-sage, #6A8E5C); box-shadow: 0 0 0 3px rgba(106, 142, 92, 0.18); } /* Submit-knap (sage cirkel) — sikre SVG-ikonen vises + korrekt brand-hover. * Override af globale .vk-btn:hover (red) og evt. browser/Hello-Elementor button:hover. */ form.nav-search button[type="submit"]{ flex-shrink: 0; background: var(--vk-sd-sage, #6A8E5C); color: #fff; transition: background .15s ease, transform .1s ease; } form.nav-search button[type="submit"] svg{ width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; flex-basis: 14px !important; flex-shrink: 0 !important; display: block; color: #fff; stroke: currentColor; } form.nav-search button[type="submit"]:hover, form.nav-search button[type="submit"]:focus-visible{ background: var(--vk-sd-sage-hover, #587A4B); color: #fff; transform: scale(1.05); } form.nav-search button[type="submit"]:active{ transform: scale(.97); } /* Dropdown lives in (portalled) so parent overflow:hidden cannot clip it. * JS sets position:fixed + top/right inline; this rule is fallback for safety. */ .vk-search-dd{ position:fixed; width:min(560px, 92vw); max-height:min(70vh, 580px); overflow:auto; background:#fff; border:1px solid var(--vk-sd-border-strong); border-radius:18px; box-shadow:0 22px 60px rgba(31,42,36,.18), 0 6px 18px rgba(31,42,36,.08); z-index:1000; font:500 14px/1.4 'Work Sans',system-ui,-apple-system,sans-serif; color:var(--vk-sd-body); scroll-behavior:smooth; animation:vkSdFadeIn .18s ease-out; } @keyframes vkSdFadeIn{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} } .vk-search-dd[hidden]{ display:none; } /* Loading state — top progress strip */ .vk-search-dd.is-loading::before{ content:''; position:sticky; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--vk-sd-sage), transparent); background-size:200% 100%; animation:vkSdProgress 1.2s linear infinite; z-index:2; } @keyframes vkSdProgress{ 0%{background-position:100% 0} 100%{background-position:-100% 0} } /* Group */ .vk-search-dd .vk-sd-group{ padding:6px 0; border-top:1px solid var(--vk-sd-border); } .vk-search-dd .vk-sd-group:first-child{ border-top:0; padding-top:14px; } .vk-search-dd .vk-sd-head{ display:flex; align-items:baseline; justify-content:space-between; padding:6px 18px 8px; } .vk-search-dd .vk-sd-label{ font:700 11px/1 'Work Sans',sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--vk-sd-muted); } .vk-search-dd .vk-sd-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; padding:1px 8px; border-radius:9999px; background:rgba(106,142,92,.14); color:var(--vk-sd-sage-hover); font:700 10.5px/1.6 'Work Sans',sans-serif; letter-spacing:.04em; } .vk-search-dd .vk-sd-list{ list-style:none; margin:0; padding:0; } .vk-search-dd .vk-sd-item{ display:grid; grid-template-columns:48px 1fr 16px; gap:14px; align-items:center; padding:10px 18px; text-decoration:none; color:var(--vk-sd-body); transition:background .12s, color .12s; } .vk-search-dd .vk-sd-item:hover, .vk-search-dd .vk-sd-item.is-active, .vk-search-dd .vk-sd-item:focus-visible{ background:var(--vk-sd-cream); outline:0; } .vk-search-dd .vk-sd-item:hover .vk-sd-arrow, .vk-search-dd .vk-sd-item.is-active .vk-sd-arrow{ color:var(--vk-sd-sage-hover); transform:translateX(3px); } /* Thumb */ .vk-search-dd .vk-sd-thumb{ position:relative; width:48px; height:48px; border-radius:10px; overflow:hidden; background:var(--vk-sd-cream-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .vk-search-dd .vk-sd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .vk-search-dd .vk-sd-thumb-fallback{ font:700 18px/1 'Work Sans',sans-serif; color:var(--vk-sd-sage); } .vk-search-dd .vk-sd-thumb svg{ color:var(--vk-sd-muted); } /* Page-icon thumb has no bg */ .vk-search-dd .vk-sd-page .vk-sd-thumb{ background:transparent; border:1px dashed var(--vk-sd-border-strong); } /* Event date badge floating on thumb */ .vk-search-dd .vk-sd-badge{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--vk-sd-red); color:#fff; line-height:1; padding:4px; } .vk-search-dd .vk-sd-badge b{ font:800 16px/1 'Work Sans',sans-serif; letter-spacing:-.01em; } .vk-search-dd .vk-sd-badge i{ font:700 9px/1 'Work Sans',sans-serif; letter-spacing:.1em; margin-top:2px; font-style:normal; opacity:.95; } /* When badge present, image dims behind it */ .vk-search-dd .vk-sd-thumb:has(.vk-sd-badge) img{ filter:brightness(.5) saturate(.8); } /* Body */ .vk-search-dd .vk-sd-body{ min-width:0; display:flex; flex-direction:column; gap:2px; } .vk-search-dd .vk-sd-title{ font:600 14.5px/1.3 'Work Sans',sans-serif; color:var(--vk-sd-dark); letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vk-search-dd .vk-sd-title mark{ background:rgba(106,142,92,.18); color:inherit; border-radius:3px; padding:0 2px; } .vk-search-dd .vk-sd-meta{ font:500 12px/1.35 'Work Sans',sans-serif; color:var(--vk-sd-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vk-search-dd .vk-sd-arrow{ color:var(--vk-sd-muted); flex-shrink:0; transition:transform .15s, color .15s; } /* Footer "see all" link */ .vk-search-dd .vk-sd-foot{ position:sticky; bottom:0; padding:10px 18px 12px; background:linear-gradient(180deg, transparent 0, rgba(255,255,255,.95) 30%, #fff 100%); border-top:1px solid var(--vk-sd-border); text-align:center; } .vk-search-dd .vk-sd-all{ display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--vk-sd-dark); color:#fff; border-radius:9999px; text-decoration:none; font:600 13px/1 'Work Sans',sans-serif; letter-spacing:.01em; transition:background .15s, transform .15s; } .vk-search-dd .vk-sd-all:hover{ background:var(--vk-sd-sage); transform:translateY(-1px); color:#fff; } /* Empty / no results */ .vk-search-dd .vk-sd-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:38px 24px 32px; text-align:center; } .vk-search-dd .vk-sd-empty-ill{ color:var(--vk-sd-sage); opacity:.55; } .vk-search-dd .vk-sd-empty strong{ font:700 15px/1.35 'Work Sans',sans-serif; color:var(--vk-sd-dark); text-wrap:balance; } /* Mobile: full-width sheet under header */ @media (max-width:720px){ .vk-search-dd{ left:8px !important; right:8px !important; width:auto; max-height:75vh; border-radius:16px; } .vk-search-dd .vk-sd-item{ padding:10px 14px; } } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ .vk-search-dd, .vk-search-dd .vk-sd-item, .vk-search-dd .vk-sd-arrow{ animation:none !important; transition:none !important; } }