/* CPN Search widget — drop-in autocomplete with image thumbnails */
.cpn-search { position: relative; display: block; max-width: 560px; margin: 0 auto; font-family: 'Roboto', -apple-system, Segoe UI, Tahoma, sans-serif; }
.cpn-s-wrap { position: relative; display: flex; align-items: center; background: #fff; border: 2px solid #2a405b; border-radius: 30px; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: box-shadow .2s, border-color .2s; }
.cpn-s-wrap:focus-within { border-color: #997300; box-shadow: 0 4px 14px rgba(153,115,0,.18); }
.cpn-s-input { flex: 1; min-width: 0; padding: .7rem 1rem .7rem 1.3rem; border: 0; outline: 0; font-size: 1rem; background: transparent; color: #2a405b; font-family: inherit; }
.cpn-s-input::placeholder { color: #9aa3b2; }
.cpn-s-button { flex: 0 0 auto; width: 44px; height: 44px; margin: 1px 1px 1px 0; border: 0; background: #2a405b; color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.cpn-s-button:hover { background: #1a2942; }
.cpn-s-wrap:focus-within .cpn-s-button { background: #997300; }

.cpn-s-drop { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.14); max-height: 480px; overflow-y: auto; z-index: 9999; padding: .4rem 0; }
.cpn-s-drop.is-open { display: block; }

.cpn-s-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: .85rem; padding: .65rem .9rem; text-decoration: none; color: #2a405b; transition: background .12s; }
.cpn-s-item:hover, .cpn-s-item.is-active { background: #fafaf6; }
.cpn-s-item:not(:last-child) { border-bottom: 1px solid #f3f3ee; }

.cpn-s-img { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: #f7d9b3; display: flex; align-items: center; justify-content: center; flex: 0 0 56px; color: #997300; font-size: 1.6rem; }
.cpn-s-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpn-s-img-fallback { background: linear-gradient(135deg, #f7d9b3 0%, #e8c89a 100%); }
.cpn-s-img-parish { background: linear-gradient(135deg, #997300 0%, #7a5c00 100%); color: #fff; }
.cpn-s-img-diocese { background: linear-gradient(135deg, #2a405b 0%, #1a2942 100%); color: #fff; }
.cpn-s-img-category { background: linear-gradient(135deg, #f7d9b3 0%, #ddc9a3 100%); color: #2a405b; }

.cpn-s-text { min-width: 0; }
.cpn-s-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #2a405b; font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpn-s-title mark { background: #f7d9b3; color: #2a405b; padding: 0 2px; border-radius: 2px; }
.cpn-s-sub { font-size: .82rem; color: #6b7280; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpn-s-snippet { font-size: .8rem; color: #888; margin-top: .15rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cpn-s-snippet mark { background: #fde68a; color: #7a5c00; padding: 0 1px; border-radius: 2px; font-weight: 600; }
.cpn-s-arrow { color: #c5a163; font-size: 1.4rem; opacity: 0; transition: opacity .15s, transform .15s; flex: 0 0 auto; }
.cpn-s-item:hover .cpn-s-arrow, .cpn-s-item.is-active .cpn-s-arrow { opacity: 1; transform: translateX(2px); }

.cpn-s-empty { padding: 1.2rem 1rem; text-align: center; color: #6b7280; font-size: .9rem; }
.cpn-s-seeall { display: block; padding: .7rem 1rem; background: #fafaf6; color: #997300; text-decoration: none; font-weight: 600; font-size: .9rem; text-align: center; border-top: 1px solid #f3f3ee; transition: background .12s; }
.cpn-s-seeall:hover { background: #f7d9b3; color: #7a5c00; }

@media (max-width: 480px) {
  .cpn-s-input { font-size: 16px; padding: .65rem .75rem .65rem 1rem; }
  .cpn-s-img { width: 48px; height: 48px; flex: 0 0 48px; }
  .cpn-s-item { grid-template-columns: 48px 1fr auto; gap: .65rem; padding: .55rem .7rem; }
  .cpn-s-title { font-size: .95rem; }
}