/* AK Search. Everything is prefixed ak-search-. Colours and sizes of the form and of the suggestion box are CSS variables:
   override them (or any rule) in Settings -> AK Search -> Custom CSS, for example  :root{--aks-border:#999;--aks-radius:4px}  */
:root{--aks-h:30px;--aks-radius:6px;--aks-border:#828282;--aks-border-soft:#a8a8a8;--aks-ring:rgba(130,130,130,.22);--aks-bg:#fff;--aks-text:#444;--aks-muted:#696969;--aks-btn-bg:#f6f7f8;--aks-hover-bg:rgba(0,115,165,.08);--aks-active-bg:rgba(0,115,165,.15);--aks-box-border:#c8c8c8;--aks-shadow:0 4px 12px rgba(0,0,0,.15);--aks-font:14px;--aks-sg-font:16px;--aks-chip-font:14px;--aks-box-w:285px}

/* The form: our own markup (class ak-search-*) and the theme's default one (.search-form, in the header box or anywhere else) look the
   same from the first paint. */
.ak-search-form,.search-form{display:flex;justify-content:flex-end;align-items:stretch;gap:6px;position:relative;width:100%;margin:0;padding:0;box-sizing:border-box}
.ak-search-input,.search-form .search-field,.ak-search-submit,.search-form .search-submit{height:var(--aks-h);margin:0;box-sizing:border-box;border:1px solid var(--aks-border);border-radius:var(--aks-radius);padding:3px 12px;font:inherit;font-size:var(--aks-font);line-height:1.2;color:var(--aks-text);color-scheme:only light;-webkit-appearance:none;appearance:none}
.ak-search-input,.search-form .search-field{flex:1 1 0;min-width:0;width:auto;padding-left:34px;background:var(--aks-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23828282' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 11px 50%;transition:border-color .15s ease,box-shadow .15s ease;outline:0}
.ak-search-input::placeholder,.search-form .search-field::placeholder{font-size:inherit;color:#777;opacity:1}
.ak-search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.ak-search-submit,.search-form .search-submit{flex:0 0 auto;width:auto;cursor:pointer;background:var(--aks-btn-bg);transition:border-color .15s ease,box-shadow .15s ease}
.ak-search-input:hover,.search-form .search-field:hover,.ak-search-submit:hover,.search-form .search-submit:hover{border-color:var(--aks-border-soft)}
.ak-search-input:focus,.search-form .search-field:focus,.ak-search-submit:focus-visible,.search-form .search-submit:focus-visible{border-color:var(--aks-border-soft);box-shadow:0 0 0 3px var(--aks-ring);outline:0}
.ak-search-form--wide{width:100%;max-width:none}
.ak-search-form--wide .ak-search-input{flex:1 1 auto}

/* The theme's .toggle-search is absolutely positioned and changes its WIDTH on hover (the field moved). The box now has ONE width in every
   state (the owner's tested rule: 285px; "body" in front beats the theme's selectors), nothing widens, nothing moves. */
body .toggle-search,body .toggle-search:hover,body .toggle-search.active{width:var(--aks-box-w);transition:none}

/* Phones: the same look, the type 1-2px smaller (13px, 12px on the narrowest), the dropdown in proportion. */
@media (max-width:599px){
	:root{--aks-h:28px;--aks-font:13px;--aks-sg-font:14px;--aks-chip-font:12px}
	.ak-search-input,.search-form .search-field{padding-left:30px;background-position:9px 50%;background-size:14px}
	.ak-search-input,.search-form .search-field,.ak-search-submit,.search-form .search-submit{padding-top:0;padding-bottom:0;padding-right:10px}
	.ak-search-submit,.search-form .search-submit{padding-left:10px}
}
@media (max-width:423px){
	:root{--aks-h:24px;--aks-font:12px;--aks-sg-font:13px;--aks-chip-font:11px}
	body .toggle-search,body .toggle-search:hover,body .toggle-search.active{width:70%;margin:3px 2.5rem}
	.ak-search-input,.search-form .search-field{padding-left:26px;background-position:8px 50%;background-size:12px}
	.ak-search-input,.search-form .search-field,.ak-search-submit,.search-form .search-submit{padding-right:8px}
	.ak-search-submit,.search-form .search-submit{padding-left:8px}
}
.ak-search-sort{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:6px 0 10px;font-size:.9em}
.ak-search-sort-label{opacity:.7}
.ak-search-sort-link{text-decoration:none;border-bottom:1px solid transparent}
.ak-search-sort-default{opacity:.6;font-weight:400}
.ak-search-more{margin:4px 0 0;font-size:.9em}
.ak-search-more-link{margin-left:4px}
.ak-search-sort-link.is-active{font-weight:600;border-bottom-color:currentColor}
.ak-search-results{list-style:none;margin:0;padding:0}
.ak-search-item{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.ak-search-row{display:flex;gap:14px;align-items:flex-start}
.ak-search-thumb{flex:0 0 80px;width:80px;height:80px;display:block;overflow:hidden;background:rgba(0,0,0,.05)}
.ak-search-thumb img,.ak-search-thumb-svg{display:block;width:80px;height:80px;object-fit:cover}
.ak-search-body{flex:1 1 auto;min-width:0}
.ak-search-title{margin:0 0 8px;font-size:1.15em;line-height:1.3}
.ak-search-snippet{margin:0 0 4px;line-height:1.45}
.ak-search-snippet mark,.ak-search-title mark{background:#fff9db;color:inherit;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;text-decoration:none;font-weight:inherit}
.ak-search-meta{margin:0;font-size:.85em;opacity:.7}
.ak-search-meta>*+*:before{content:"·";margin:0 .5em}
.ak-search-pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:18px 0}
.ak-search-pagination a,.ak-search-pagination span{display:block;min-width:32px;padding:6px 10px;text-align:center;border:1px solid rgba(0,0,0,.2);border-radius:3px;box-sizing:border-box}
.ak-search-pagination .current{background:rgba(0,0,0,.08);font-weight:600}
.ak-search-empty ul{margin:.5em 0 1em 1.2em}
.ak-search-other{margin-top:1em}
@media (max-width:480px){.ak-search-row{gap:10px}.ak-search-thumb,.ak-search-thumb img,.ak-search-thumb-svg{width:64px;height:64px;flex-basis:64px}}

/* Suggestion box: always the plugin's own light box, whatever the browser does with unstyled controls. */
.ak-search-suggest{position:absolute;z-index:9999;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;max-height:60vh;overflow:auto;box-sizing:border-box;background:var(--aks-bg);color:var(--aks-text);color-scheme:only light;border:1px solid var(--aks-box-border);border-radius:var(--aks-radius);box-shadow:var(--aks-shadow);font-size:var(--aks-sg-font);line-height:1.3;text-align:left;letter-spacing:0}
.ak-search-suggest[hidden]{display:none}
.ak-search-suggest li{margin:0}
.ak-search-suggest .ak-search-suggest-head{padding:8px 12px 2px;font-size:calc(var(--aks-chip-font) - 2px);text-transform:uppercase;letter-spacing:.04em;color:var(--aks-muted)}
.ak-search-suggest .ak-search-suggest-item{display:block;min-height:36px;padding:8px 12px;box-sizing:border-box;cursor:pointer;color:var(--aks-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-search-suggest .ak-search-suggest-item:hover{background:var(--aks-hover-bg)}
.ak-search-suggest .ak-search-suggest-item.is-active{background:var(--aks-active-bg)}
.ak-search-suggest-title{font-weight:400}
.ak-search-suggest .ak-search-suggest-preset,.ak-search-suggest .ak-search-suggest-popular{display:inline-block;min-height:0;margin:3px 4px;padding:4px 10px;border:1px solid var(--aks-box-border);border-radius:14px;font-size:var(--aks-chip-font);max-width:calc(100% - 8px)}
@media (max-width:480px){.ak-search-suggest .ak-search-suggest-item{min-height:40px;padding:10px 12px}.ak-search-suggest .ak-search-suggest-preset,.ak-search-suggest .ak-search-suggest-popular{min-height:0;padding:6px 12px}}
