/*
 * SearXNG — aspeto estilo Google (modo escuro) + letra Lexend.
 * Carregado depois do CSS oficial do tema "simple" (ver sxng-google-skin.sh).
 * Mexe sobretudo nas variáveis de cor do tema; as regras de layout ficam
 * limitadas a ecrãs largos para não estragar o layout móvel original.
 */

/* ---------- Letra (alojada localmente) ---------- */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Cores: sempre escuro, seja qual for a preferência ---------- */
/* html:is(...):root ganha em especificidade a :root.theme-dark / :root.theme-auto */
html:is(.theme-auto, .theme-light, .theme-dark, .theme-black):root {
  color-scheme: dark;

  --g-bg: #202124;
  --g-surface: #303134;
  --g-surface-hover: #3c4043;
  --g-border: #3c4043;
  --g-border-strong: #5f6368;
  --g-text: #bdc1c6;
  --g-text-strong: #e8eaed;
  --g-text-muted: #9aa0a6;
  --g-text-faint: #80868b;
  --g-link: #8ab4f8;
  --g-link-visited: #c58af9;
  --g-blue: #4285f4;
  --g-red: #ea4335;
  --g-yellow: #fbbc05;
  --g-green: #34a853;
  --g-gutter: 11rem; /* coluna do logótipo nos resultados, como no Google */

  --color-base-font: var(--g-text);
  --color-base-font-rgb: 189, 193, 198;
  --color-base-background: var(--g-bg);
  --color-base-background-mobile: var(--g-bg);
  --color-url-font: var(--g-link);
  --color-url-visited-font: var(--g-link-visited);
  --color-header-background: var(--g-bg);
  --color-header-border: var(--g-border);
  --color-footer-background: #171717;
  --color-footer-border: #171717;
  --color-sidebar-border: var(--g-border);
  --color-sidebar-font: var(--g-text);
  --color-sidebar-background: transparent;
  --color-backtotop-font: var(--g-text);
  --color-backtotop-border: var(--g-border);
  --color-backtotop-background: var(--g-surface);
  --color-btn-background: var(--g-link);
  --color-btn-font: #202124;
  --color-show-btn-background: var(--g-surface-hover);
  --color-show-btn-font: var(--g-text-strong);
  --color-search-border: var(--g-border-strong);
  --color-search-shadow: none;
  --color-search-background: var(--g-surface);
  --color-search-font: var(--g-text-strong);
  --color-search-background-hover: var(--g-surface);
  --color-categories-item-selected-font: var(--g-link);
  --color-categories-item-border-selected: var(--g-link);
  --color-autocomplete-font: var(--g-text-strong);
  --color-autocomplete-border: var(--g-border-strong);
  --color-autocomplete-shadow: 0 4px 6px rgba(0, 0, 0, .32);
  --color-autocomplete-background: var(--g-surface);
  --color-autocomplete-background-hover: var(--g-surface-hover);
  --color-answer-font: var(--g-text);
  --color-answer-background: transparent;
  --color-result-keyvalue-col-table: var(--g-bg);
  --color-result-keyvalue-odd: var(--g-bg);
  --color-result-keyvalue-even: var(--g-surface);
  --color-result-background: transparent;
  --color-result-border: var(--g-border);
  --color-result-url-font: var(--g-text-strong);
  --color-result-vim-selected: rgba(48, 49, 52, .8);
  --color-result-vim-arrow: var(--g-link);
  --color-result-description-highlight-font: var(--g-text-strong);
  --color-result-link-font: var(--g-link);
  --color-result-link-font-highlight: var(--g-link);
  --color-result-link-visited-font: var(--g-link-visited);
  --color-result-publishdate-font: var(--g-text-muted);
  --color-result-engines-font: var(--g-text-faint);
  --color-result-search-url-border: var(--g-border-strong);
  --color-result-search-url-font: var(--g-text-strong);
  --color-result-detail-background: #171717;
  --color-result-detail-link: var(--g-link);
  --color-result-image-background: var(--g-bg);
  --color-settings-tr-hover: var(--g-surface);
  --color-settings-table-group-background: #171717;
  --color-toolkit-dialog-background: var(--g-bg);
  --color-toolkit-select-background: var(--g-surface);
  --color-toolkit-select-border: var(--g-border-strong);
  --color-toolkit-select-background-hover: var(--g-surface-hover);
  --color-toolkit-checkbox-onoff-on-mark-background: var(--g-link);
  --color-toolkit-checkbox-input-border: var(--g-link);
  --color-favicon-background-color: var(--g-surface);
  --color-favicon-border-color: var(--g-surface);
}

/* ---------- Tipografia ---------- */
html, body, input, button, select, textarea {
  font-family: "Lexend", "Google Sans", Arial, Helvetica, sans-serif;
}
body {
  background: var(--g-bg);
  color: var(--g-text);
}

/* ---------- Logótipo colorido (letras embrulhadas por google.js) ---------- */
.g-logo { font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.g-logo .g-b { color: var(--g-blue); }
.g-logo .g-r { color: var(--g-red); }
.g-logo .g-y { color: var(--g-yellow); }
.g-logo .g-g { color: var(--g-green); }

/* ---------- Links do topo (Sobre / Preferências) ---------- */
#links_on_top a,
#links_on_top a:visited { color: var(--g-text-strong); font-size: .85rem; }
#links_on_top a:hover { text-decoration: underline; }

/* ---------- Caixa de pesquisa (comum) ---------- */
.search_box {
  border: 1px solid var(--g-border-strong);
  border-radius: 24px;
  background: var(--g-surface);
  box-shadow: none;
  overflow: hidden;
}
.search_box:hover,
.search_box:focus-within {
  background: var(--g-surface);
  border-color: transparent;
  box-shadow: 0 1px 6px rgba(23, 23, 23, .7);
}
#q, #send_search, #clear_search {
  background: transparent;
  color: var(--g-text-strong);
  font-size: 1rem;
}
#q { border-radius: 24px 0 0 24px; padding-left: 1.25rem; }
#q::placeholder { color: var(--g-text-muted); }
#send_search { border-radius: 0 24px 24px 0; color: var(--g-link); }
#send_search:hover { background: transparent; color: var(--g-text-strong); }
#clear_search { color: var(--g-text-muted); }
#clear_search:hover { color: var(--g-text-strong); }
.autocomplete { border-radius: 0 0 24px 24px; overflow: hidden; }

/* ---------- Página inicial ---------- */
#main_index .index { padding-top: 0; }
.index .title {
  background: none;
  min-height: 0;
  margin: 18vh auto 1.75rem;
  text-align: center;
}
.index div.title h1 {
  visibility: visible;
  margin: 0;
  font-size: clamp(3.5rem, 9vw, 5.75rem);
  line-height: 1;
  color: var(--g-text-strong);
}
.index .search_box { max-width: 36rem; width: 100%; }
.index #search_view { padding: 0; }
.index #send_search { order: -1; border-radius: 24px 0 0 24px; padding-left: 1rem; color: var(--g-text-muted); }
.index #q { border-radius: 0; padding-left: .5rem; }

.g-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem 0 0;
}
.g-buttons button {
  background: var(--g-surface);
  color: var(--g-text-strong);
  border: 1px solid var(--g-surface);
  border-radius: 4px;
  padding: .55rem 1rem;
  font-size: .875rem;
  cursor: pointer;
}
.g-buttons button:hover { border-color: var(--g-border-strong); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }

/* ---------- Rodapé ---------- */
footer {
  background: #171717;
  border-top: 0;
  color: var(--g-text-muted);
  font-size: .8rem;
  line-height: 1.7;
}
footer a, footer a:visited { color: var(--g-text-muted); }
footer a:hover { color: var(--g-text-strong); }

/* ---------- Resultados: cabeçalho ---------- */
#search_logo { text-decoration: none; }
#search_logo svg { display: none; }
#search_logo .g-logo { font-size: 1.75rem; line-height: 1; }

/* Separadores (categorias) */
button.category_button {
  color: var(--g-text-muted);
  text-transform: none;
  font-size: .875rem;
  border-bottom: 3px solid transparent;
  padding: .5rem .1rem .65rem;
  margin-right: 1.5rem;
}
button.category_button svg { display: none; }
button.category_button:hover { color: var(--g-text-strong); }
button.category_button.selected,
button.category_button:active {
  color: var(--g-link);
  border-bottom: 3px solid var(--g-link);
}
.category_name::first-letter { text-transform: uppercase; }

/* "Mais" e "Ferramentas" (criados por google.js) */
.g-more { position: relative; display: inline-block; }
.g-tab-btn {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--g-text-muted);
  font-size: .875rem;
  padding: .5rem .1rem .65rem;
  margin-right: 1.5rem;
  cursor: pointer;
}
.g-tab-btn:hover, .g-tab-btn[aria-expanded="true"] { color: var(--g-text-strong); }
.g-tab-btn.g-has-selected { color: var(--g-link); border-bottom-color: var(--g-link); }
.g-more-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3000;
  min-width: 11rem;
  padding: .5rem 0;
  background: var(--g-surface);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.g-more.open .g-more-menu { display: block; }
.g-more-menu button.category_button {
  display: flex;
  width: 100%;
  margin: 0;
  padding: .6rem 1rem;
  border: 0;
  color: var(--g-text-strong);
}
.g-more-menu button.category_button:hover { background: var(--g-surface-hover); }
.g-more-menu button.category_button.selected { color: var(--g-link); border: 0; }

/* Ferramentas escondidas por omissão (só com JS, para não perder os filtros sem JS) */
.js body.results_endpoint .search_filters.g-collapsed { display: none; }
.search_filters select {
  color: var(--g-text-muted);
  font-size: .85rem;
  border-radius: 4px;
}
.search_filters select:hover { color: var(--g-text-strong); background: var(--g-surface); }

/* ---------- Resultados: lista ---------- */
#urls .result:not(.result-images) {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 1.9rem;
}
#urls .result:not(.result-images):hover { background: transparent; }
.result .url_header { align-items: center; gap: .75rem; }
.result .url_header .favicon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--g-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.result .url_header .favicon img { width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; }
.result .url_wrapper { color: var(--g-text); font-size: .8rem; line-height: 1.35; }
.result .url_wrapper .url_i1 { color: var(--g-text-strong); }
.result h3 { margin: .35rem 0 .2rem; font-size: 1.25rem; line-height: 1.3; }
.result h3 a { font-size: 1em; font-weight: 400; color: var(--g-link); }
.result h3 a:visited { color: var(--g-link-visited); }
.result .content,
.result .stat {
  color: var(--g-text);
  font-size: .875rem;
  line-height: 1.58;
}
.result .content .highlight { color: var(--g-text); font-weight: 600; }
.result .engines { margin-top: .3rem; font-size: .7rem; color: var(--g-text-faint); }
.result .engines span { color: var(--g-text-faint); }
.result .engines a.cache_link,
.result .engines a.proxyfied_link { color: var(--g-text-faint); }
.result .thumbnail { border-radius: 8px; }

/* Respostas (tipo "destaque" do Google) */
#answers {
  border: 1px solid var(--g-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  line-height: 1.58;
}
#answers .answer-url { color: var(--g-link); font-size: .85rem; }

/* ---------- Barra lateral: painel de informação ---------- */
#infoboxes .infobox {
  border: 1px solid var(--g-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: transparent;
}
#infoboxes .infobox h2.title { color: var(--g-text-strong); font-size: 1.75rem; font-weight: 400; margin: .25rem 0 .75rem; }
#infoboxes .infobox img { border-radius: 8px; }
#infoboxes .infobox p { color: var(--g-text); line-height: 1.58; font-size: .875rem; }
#infoboxes .infobox dt { color: var(--g-text-strong); font-weight: 600; }
#infoboxes .infobox dd { color: var(--g-text); }
#infoboxes .infobox .urls ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
#infoboxes .infobox .urls li.url { margin: 0; }
#infoboxes .infobox .urls li.url::marker { content: none; }
#infoboxes .infobox .urls li.url a {
  display: inline-block;
  color: var(--g-link);
  border: 1px solid var(--g-border-strong);
  border-radius: 16px;
  padding: .25rem .7rem;
  font-size: .8rem;
}
#infoboxes .infobox .urls li.url a:hover { background: var(--g-surface); text-decoration: none; }
#sidebar .sidebar-collapsible > summary.title { color: var(--g-text-strong); font-weight: 400; }

/* Pesquisas relacionadas em "chips" */
#suggestions .wrapper { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
#suggestions .wrapper li::marker { content: none; }
#suggestions input.suggestion {
  background: var(--g-surface);
  color: var(--g-text-strong) !important;
  border-radius: 18px;
  padding: .5rem .9rem;
  font-size: .85rem;
  width: auto;
}
#suggestions input.suggestion:hover { background: var(--g-surface-hover); text-decoration: none; }

/* ---------- Paginação "SearXNNNG" ---------- */
#pagination { text-align: center; margin: 1rem 0 2.5rem; }
#pagination button,
#pagination input[type="submit"],
#pagination input[type="button"] {
  background: transparent;
  border: 0;
  color: var(--g-link);
  font-size: .875rem;
  cursor: pointer;
  padding: .25rem .4rem;
  min-width: 1.6rem;
}
#pagination input.page_number_current { color: var(--g-text-strong); cursor: default; }
#pagination button:hover,
#pagination input.page_number:hover { text-decoration: underline; }
.g-pager-logo { display: block; font-size: 1.9rem; margin-bottom: .25rem; letter-spacing: -.04em; }

#backToTop { background: var(--g-surface); border-color: var(--g-border); border-radius: 50%; }

/* ---------- Layout de ecrã largo (cabeçalho e colunas à Google) ---------- */
@media screen and (min-width: 50em) {
  #search_header {
    grid-template-columns: var(--g-gutter) minmax(0, 1fr);
    grid-template-areas: "logo search" "spacer categories";
    column-gap: 0;
    row-gap: .9rem;
    padding: 1.5rem 1rem 0 0;
  }
  #search_logo {
    display: flex !important;
    justify-content: flex-end;
    padding: 0 2rem 0 1.5rem;
  }
  body.results_endpoint #search_view { padding: 0; }
  body.results_endpoint .search_box { max-width: 43rem; height: 46px; }
  #categories { font-size: 1em; }
  .search_filters { margin: .6rem 0 0 var(--g-gutter); }

  #main_results div#results,
  .center-alignment-no #main_results div#results {
    grid-template:
      "corrections sidebar" min-content
      "answers sidebar" min-content
      "urls sidebar" 1fr
      "pagination sidebar" min-content
      / minmax(0, 40.75rem) minmax(0, 23rem);
    justify-content: start;
    gap: 0 4.5rem;
    margin: 1.25rem 1.5rem 0 var(--g-gutter);
  }
  .center-alignment-no #sidebar,
  #sidebar { margin: 0; }
}
@media screen and (min-width: 50em) and (max-width: 70em) {
  html:is(.theme-auto, .theme-light, .theme-dark, .theme-black):root { --g-gutter: 2rem; }
  #search_logo .g-logo { font-size: 1.4rem; }
  #search_header { grid-template-columns: auto minmax(0, 1fr); padding-left: 1rem; }
  #search_logo { padding: 0 1.25rem 0 0; }
  #main_results div#results,
  .center-alignment-no #main_results div#results {
    grid-template:
      "corrections" min-content
      "answers" min-content
      "sidebar" min-content
      "urls" 1fr
      "pagination" min-content
      / minmax(0, 40.75rem);
  }
}

/* ---------- Ecrãs pequenos: só retoques ---------- */
@media screen and (max-width: 50em) {
  .index .title { margin-top: 14vh; }
  #search_logo .g-logo { font-size: 1.3rem; }
  .search_box { border-radius: 24px; }
  #search_view:focus-within .search_box { border-radius: 0; }
  #urls .result:not(.result-images) { padding: 0 1rem; }
}