/* === Custom Styles for search.akinopng.com === */

/* 1. Homepage: logo visivel e centralizada */
body .index .title {display:block!important;margin:0 auto!important;min-height:auto!important}
.index .title img{width:30%;height:auto;display:block;margin:0 auto}
#main_index{margin-top:25vh!important}
.index #search{margin-top:10px}

/* 2. Logo na pagina de resultados - visivel */
#search_logo{display:flex!important;padding:.5rem 10px 0;align-items:center}

/* 3. Search box: sombra e placeholder */
.search_box{box-shadow:0 4px 20px rgba(0,0,0,0.3)!important}
html body #q::placeholder{color:#9ca3af!important;opacity:1!important}

/* 4. Header resultados: espacamento externo e search_view padding */
body.search_endpoint #search_header{margin-top:3%!important;padding-top:0!important}
#search_view{padding:10px 0!important}

/* 5. Espaco entre barra de busca e abas (categories) */
body.search_endpoint #categories_container{margin-top:.8rem!important}

/* 6. Google-style layout */
#urls article.result{margin-bottom:1.5rem;padding:.6rem 0!important;border:none!important;background:transparent!important}
#urls article.result a.url_header{display:flex!important;align-items:center;gap:.4rem;margin-bottom:.15rem;text-decoration:none;font-size:.82rem;line-height:1.4}
#urls article.result a.url_header .url_wrapper{display:inline-flex!important;flex-wrap:wrap;gap:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Engines antes da URL - inline (sobrescreve position:absolute do Simple Nord) */
#urls article.result .engines{display:inline-flex!important;align-items:center;gap:.3rem;margin-bottom:.15rem;font-size:.72rem;white-space:nowrap;opacity:.7;flex-wrap:wrap;position:static!important;float:none!important;filter:none!important;text-align:left!important;bottom:auto!important;right:auto!important}
#urls article.result .engines .cache_link{margin-left:.2rem}
#urls article.result .engines span{margin-right:.3rem}

/* Favicon antes do titulo */
#urls article.result a.favicon-before-title{display:inline-block;vertical-align:middle;margin-right:.4rem;text-decoration:none;flex-shrink:0}
#urls article.result a.favicon-before-title img{width:16px;height:16px;display:block}

#urls article.result h3{margin:.2rem 0 .15rem!important;padding:0!important;font-size:1rem;font-weight:400;line-height:1.4;display:inline;vertical-align:middle}
#urls article.result h3 a{text-decoration:none}
#urls article.result h3 a:hover{text-decoration:underline}
#urls article.result time.published_date{font-size:.8rem;margin-right:.5rem;display:inline}
#urls article.result p.content{font-size:.9rem;line-height:1.58;margin-top:.2rem;margin-bottom:.15rem;word-wrap:break-word;display:block}
#urls article.result .thumbnail{max-width:100px;max-height:100px;border-radius:8px;margin:0 0 .5rem 1rem;float:right;object-fit:cover}
#urls article.result .break{display:none!important}
#urls article.result .result_author,
#urls article.result .result_length,
#urls article.result .result_views{font-size:.8rem;display:inline;margin-right:.5rem}

/* 7. Image results - flow inline-block (default, mixed results) */
article.result-images{margin:0!important;padding:.5rem!important;border-radius:8px;height:auto!important;width:auto!important;display:inline-block!important;vertical-align:top;max-width:90%}

/* 7b. Masonry colunas SOMENTE quando só aba Imagens */
#results.only_template_images #urls{column-width:200px!important;column-gap:0!important;display:block!important}
#results.only_template_images article.result-images{break-inside:avoid!important;display:inline-block!important;width:100%!important;max-width:100%}

/* 7c. Masonry colunas para imagens em resultados mistos */
#mixed-images{column-width:200px!important;column-gap:0!important;display:block!important;margin-top:1rem}
#mixed-images article.result-images{break-inside:avoid!important;display:inline-block!important;width:100%!important;max-width:100%}

/* Layout interno dos cards de imagem */
article.result-images > a{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;text-decoration:none;position:static!important}
article.result-images .image_thumbnail{width:200px;height:auto;max-height:400px;object-fit:contain;border-radius:8px;display:block;margin-bottom:5px}

article.result-images span.title,
article.result-images span.source{position:static!important;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;padding:0!important}
article.result-images span.title{font-size:.82rem;color:var(--color-result-link-font)}
article.result-images span.source{font-size:.72rem;color:var(--color-result-url-font)}