/* ==========================================================================
   Listtar — camada de tema
   Carrega DEPOIS de app.css e sobrescreve. Nao substitui nada: para reverter,
   basta remover o <link> do head.blade.php.

   A identidade existente foi preservada: o indigo #46446d e o teal #65b89e
   ja eram a marca. O que muda e a estrutura em volta deles — tokens, escala
   tipografica, densidade, estados e movimento.
   ========================================================================== */

:root {
  /* --- marca (derivada das cores que o site ja usava) --- */
  --l-brand:        oklch(0.380 0.072 291);
  --l-brand-hover:  oklch(0.320 0.080 291);
  --l-brand-soft:   oklch(0.955 0.018 291);
  --l-brand-line:   oklch(0.860 0.040 291);

  --l-accent:       oklch(0.620 0.090 168);
  --l-accent-hover: oklch(0.545 0.098 168);
  --l-accent-soft:  oklch(0.960 0.030 168);

  /* --- neutros com leve viés para o hue da marca (nunca creme/bege) --- */
  --l-bg:         oklch(0.981 0.004 291);
  --l-surface:    oklch(1 0 0);
  --l-surface-2:  oklch(0.967 0.006 291);

  --l-ink:        oklch(0.240 0.021 291);   /* ~14:1 no branco */
  --l-ink-2:      oklch(0.455 0.016 291);   /* ~7:1  */
  --l-ink-muted:  oklch(0.570 0.014 291);   /* ~4.8:1 — piso para texto */

  --l-line:       oklch(0.905 0.008 291);
  --l-line-soft:  oklch(0.947 0.006 291);

  /* --- tipografia: uma familia, escala fixa, razao ~1.16 --- */
  --l-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --l-t-micro: 0.75rem;
  --l-t-meta:  0.8125rem;
  --l-t-sm:    0.875rem;
  --l-t-body:  0.9375rem;
  --l-t-card:  1.0625rem;
  --l-t-sec:   1.375rem;
  --l-t-page:  1.75rem;

  /* --- espacamento e forma --- */
  --l-r-sm: 6px;
  --l-r-md: 10px;
  --l-r-lg: 14px;
  --l-r-pill: 999px;

  --l-shadow-rest:  0 1px 2px oklch(0.24 0.02 291 / 0.05);
  --l-shadow-hover: 0 2px 4px oklch(0.24 0.02 291 / 0.06),
                    0 8px 20px oklch(0.24 0.02 291 / 0.08);

  /* --- movimento --- */
  --l-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --l-fast: 140ms;
  --l-med:  200ms;

  /* --- camadas --- */
  --l-z-sticky: 100;
  --l-z-dropdown: 200;
  --l-z-banner: 300;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--l-font);
  font-size: var(--l-t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--l-font);
  color: var(--l-ink);
  font-weight: 650;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

a { text-decoration: none; }

/* foco visivel e consistente em toda a interface */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sub-link:focus-visible,
.section-title:focus-visible {
  outline: 2px solid var(--l-accent);
  outline-offset: 2px;
  border-radius: var(--l-r-sm);
}

::selection { background: var(--l-brand-soft); color: var(--l-brand); }

/* ==========================================================================
   Cabecalho
   ========================================================================== */

.header-container {
  background: var(--l-brand);
  border-bottom: 1px solid oklch(0.30 0.075 291);
}

.site-header { padding-block: 1.15rem; }

.image-logo img,
.text-logo a { transition: opacity var(--l-fast) var(--l-ease); }
.image-logo a:hover img { opacity: 0.85; }

.header-icons a,
.header-icons .lang-toggle {
  color: oklch(0.90 0.02 291);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--l-r-sm);
  transition: background var(--l-fast) var(--l-ease),
              color var(--l-fast) var(--l-ease);
}

.header-icons a:hover,
.header-icons .lang-toggle:hover {
  background: oklch(1 0 0 / 0.12);
  color: #fff;
}

/* ==========================================================================
   Navegacao
   ========================================================================== */

.navbar,
.main-menu,
nav.navbar {
  background: var(--l-surface);
  border-bottom: 1px solid var(--l-line);
  box-shadow: none;
}

.nav-link {
  color: var(--l-ink-2);
  font-size: var(--l-t-sm);
  font-weight: 550;
  padding: 0.55rem 0.85rem;
  border-radius: var(--l-r-sm);
  transition: color var(--l-fast) var(--l-ease),
              background var(--l-fast) var(--l-ease);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--l-brand);
  background: var(--l-brand-soft);
}

.nav-item.active > .nav-link,
.nav-link.active {
  color: var(--l-brand);
  font-weight: 650;
}

/* ==========================================================================
   Busca
   ========================================================================== */

.links .input-group,
form .input-group {
  border-radius: var(--l-r-lg);
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  box-shadow: var(--l-shadow-rest);
  overflow: hidden;
  transition: border-color var(--l-med) var(--l-ease),
              box-shadow var(--l-med) var(--l-ease);
}

.links .input-group:focus-within,
form .input-group:focus-within {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px var(--l-accent-soft);
}

.links .form-control,
.links input[type="text"],
.links input[type="search"] {
  border: 0;
  background: transparent;
  font-size: var(--l-t-body);
  color: var(--l-ink);
  padding: 0.75rem 1rem;
  box-shadow: none;
}

.links .form-control:focus { box-shadow: none; outline: none; }

/* o placeholder tambem precisa de 4.5:1 — cinza claro nao serve */
.links .form-control::placeholder { color: var(--l-ink-muted); opacity: 1; }

.links .btn-search,
.links .input-group .btn,
.input-group-append .btn {
  background: var(--l-accent);
  border: 0;
  color: #fff;
  padding-inline: 1.15rem;
  transition: background var(--l-fast) var(--l-ease);
}

.links .input-group .btn:hover,
.input-group-append .btn:hover { background: var(--l-accent-hover); }

/* ==========================================================================
   Cartoes de categoria
   O markup usa utilitarios do Bootstrap (.shadow-sm .p-2 .bg-white .rounded).
   Sobrescrevemos dentro do escopo de .links para nao afetar outras telas.
   ========================================================================== */

.links .shadow-sm.bg-white,
.links .shadow-sm.bg-featured {
  background: var(--l-surface) !important;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r-lg) !important;
  box-shadow: var(--l-shadow-rest) !important;
  padding: 1rem 1.05rem !important;
  height: 100%;
  transition: border-color var(--l-med) var(--l-ease),
              box-shadow var(--l-med) var(--l-ease);
}

.links .shadow-sm.bg-white:hover {
  border-color: var(--l-brand-line);
  box-shadow: var(--l-shadow-hover) !important;
}

/* o wrapper interno herda espacamento do utilitario; zeramos para respirar */
.links .shadow-sm .row.p-1 { padding: 0 !important; margin: 0; }
.links .shadow-sm .d-flex { gap: 0.85rem; align-items: flex-start; }

/* o markup usa .my-auto na coluna da miniatura: com muitos chips isso a
   empurrava para o meio do cartao. Ancoramos no topo. */
.links .shadow-sm .me-2.my-auto,
.links .shadow-sm .me-2 {
  margin-right: 0 !important;
  margin-block: 0 !important;
  align-self: flex-start;
  flex: 0 0 auto;
}

/* miniatura */
.links .site-icon {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--l-r-md) !important;
  border: 1px solid var(--l-line-soft);
  background: var(--l-surface-2);
}

/* titulo da categoria */
.links .section-title {
  display: block;
  color: var(--l-ink);
  font-size: var(--l-t-card);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  transition: color var(--l-fast) var(--l-ease);
}

.links .section-title:hover { color: var(--l-brand); }

/* ==========================================================================
   Subcategorias — de texto azul sublinhado separado por virgula para chips
   Esta e a mudanca visual de maior impacto da home.
   ========================================================================== */

/* NAO transformar .ps-1 em flex: a mesma classe embrulha o conteudo dos
   blocos de link (titulo + descricao + URL), e ali o flex jogava a descricao
   e a URL na mesma linha. Os chips sao inline-flex e quebram sozinhos. */
.links .ps-1 { padding-left: 0 !important; min-width: 0; }

.links .sub-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--l-t-meta);
  font-weight: 500;
  line-height: 1;
  color: var(--l-ink-2);
  background: var(--l-surface-2);
  border: 1px solid transparent;
  border-radius: var(--l-r-pill);
  padding: 0.32rem 0.62rem;
  /* o espacamento vem de margem, nao de gap do pai — assim os chips quebram
     linha sozinhos sem exigir que .ps-1 vire container flex */
  margin: 0 0.3rem 0.3rem 0;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--l-fast) var(--l-ease),
              color var(--l-fast) var(--l-ease),
              border-color var(--l-fast) var(--l-ease);
}

.links .sub-link:hover {
  background: var(--l-brand-soft);
  border-color: var(--l-brand-line);
  color: var(--l-brand);
}

/* remove a virgula que o app.css injetava entre os links */
.links .sub-link:after { content: none !important; }

/* ==========================================================================
   Link em destaque
   ========================================================================== */

.links .bg-featured {
  background: var(--l-brand-soft) !important;
  border: 1px solid var(--l-brand-line) !important;
}

.links .bg-featured .link-title {
  color: var(--l-ink);
  font-size: var(--l-t-card);
  font-weight: 650;
  letter-spacing: -0.012em;
}

.links .bg-featured .description {
  color: var(--l-ink-2);
  font-size: var(--l-t-sm);
  margin-top: 0.15rem !important;
  max-width: 68ch;
}

.links .site-url {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: var(--l-t-meta);
  color: var(--l-ink-muted);
  font-variant-numeric: tabular-nums;
}

.links .featured {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--l-r-pill);
  background: var(--l-accent);
  color: #fff;
  font-size: var(--l-t-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

.links .title-badge { color: var(--l-accent); margin-left: 0.25rem; }

/* ==========================================================================
   Titulos de secao e rodape
   ========================================================================== */

.section-head {
  font-size: var(--l-t-sec);
  font-weight: 680;
  letter-spacing: -0.018em;
  color: var(--l-ink);
  margin-bottom: 0.9rem;
}

/* O rodape e escuro POR DESIGN — o original usava #25243c com texto branco,
   e ele ancora a pagina ecoando o indigo do cabecalho. Mantemos escuro e so
   ajustamos ao sistema de tokens.

   Cuidado que originou um bug aqui: se o fundo for clareado, os links
   continuam #fff vindos do app.css e o rodape inteiro vira branco no branco. */
.footer-container,
footer.page-footer {
  background: oklch(0.255 0.035 291);
  color: oklch(0.865 0.012 291);
  font-size: var(--l-t-sm);
  border-top: 0;
}

.footer-copyright { background: oklch(0.212 0.033 291); }

/* a regra global de .section-head pinta de escuro; no rodape precisa ser claro */
.footer-container .section-head,
footer .section-head {
  color: #fff;
  font-size: var(--l-t-body);
  font-weight: 650;
  letter-spacing: -0.008em;
}

.footer-container a,
.page-footer a {
  color: oklch(0.845 0.014 291);
  transition: color var(--l-fast) var(--l-ease);
}

.footer-container a:hover,
.page-footer a:hover { color: #fff; }

.footer-container a:focus-visible,
.page-footer a:focus-visible {
  outline: 2px solid oklch(0.80 0.06 168);
  outline-offset: 2px;
}

/* ==========================================================================
   Aviso de cookies — era uma barra preta com botao verde-limao
   ========================================================================== */

#cookie-bar, .cookie-bar, .cookiealert {
  background: oklch(0.24 0.021 291 / 0.97) !important;
  backdrop-filter: blur(8px);
  color: oklch(0.93 0.006 291) !important;
  font-size: var(--l-t-sm);
  border-top: 1px solid oklch(1 0 0 / 0.08);
  z-index: var(--l-z-banner);
}

#cookie-bar .btn, .cookiealert .btn, .cookie-bar .btn {
  background: var(--l-accent) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--l-r-sm) !important;
  font-size: var(--l-t-meta);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
}

/* ==========================================================================
   Movimento
   Os cartoes ja nascem visiveis: a animacao so os assenta. Nada depende de
   observador nem de classe adicionada por JS, entao nunca fica invisivel.
   ========================================================================== */

@keyframes l-rise {
  from { transform: translateY(7px); }
  to   { transform: none; }
}

.links .col-md-6 > .shadow-sm,
.links .col-12 > .shadow-sm {
  animation: l-rise 420ms var(--l-ease) both;
}

.links .col-md-6:nth-child(1) > .shadow-sm  { animation-delay: 0ms; }
.links .col-md-6:nth-child(2) > .shadow-sm  { animation-delay: 40ms; }
.links .col-md-6:nth-child(3) > .shadow-sm  { animation-delay: 80ms; }
.links .col-md-6:nth-child(4) > .shadow-sm  { animation-delay: 120ms; }
.links .col-md-6:nth-child(5) > .shadow-sm  { animation-delay: 150ms; }
.links .col-md-6:nth-child(6) > .shadow-sm  { animation-delay: 175ms; }
.links .col-md-6:nth-child(n+7) > .shadow-sm { animation-delay: 195ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 767.98px) {
  :root { --l-t-body: 0.9375rem; }
  .links .shadow-sm.bg-white,
  .links .shadow-sm.bg-featured { padding: 0.85rem 0.9rem !important; }
  .links .site-icon { width: 46px; height: 46px; }
  .site-header { padding-block: 0.9rem; }
}