/**
 * FOOTER.CSS
 * Componentes relacionados
 */

/* ============================================
   RODAPÉ
   ============================================ */


/* ============================================
   FOOTER
   ============================================ */

.footer {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) 0;
  border-top: var(--border-medium) solid var(--preview-card-border);
}

.footer .container {
  text-align: left;
}

.footer__menu {
  margin-bottom: var(--space-xl);
  text-align: left;
  --footer-menu-font-default: var(--font-body);
  --footer-menu-font-size-default: 0.8rem;
  --footer-menu-text-transform-default: uppercase;
  --footer-menu-letter-spacing-default: 0.03em;
  --footer-menu-fg: var(--menu-fg, var(--muted));
  --footer-menu-fg-hover: var(--menu-fg-hover, var(--text-2));
  --footer-menu-accent: var(--menu-accent, var(--accent));
  font-family: var(--menu-font, var(--footer-menu-font-default));
  font-size: var(--menu-font-size, var(--footer-menu-font-size-default));
  color: var(--footer-menu-fg);
}

[data-theme="dark"] .footer__menu {
  --footer-menu-child-fg: color-mix(in srgb, var(--footer-menu-fg) 90%, #fff 10%);
}

[data-theme="light"] .footer__menu {
  --footer-menu-child-fg: color-mix(in srgb, var(--footer-menu-fg) 90%, #000 10%);
}

.footer__menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  gap: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
  max-width: 100%;
  justify-content: flex-start;
}

.footer__menu-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 200px;
}

.footer__menu-group-title {
  font-family: var(--menu-font, var(--footer-menu-font-default));
  font-size: var(--menu-font-size, var(--footer-menu-font-size-default));
  font-weight: var(--weight-normal);
  text-transform: var(--menu-text-transform, var(--footer-menu-text-transform-default));
  letter-spacing: var(--menu-letter-spacing, var(--footer-menu-letter-spacing-default));
  margin: 0 0 var(--space-xs) 0;
  padding: 0;
  color: var(--footer-menu-fg);
  width: 100%;
  text-align: left;
  opacity: 0.85;
}

.footer__menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
}

.footer__menu-item {
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.footer__menu-link {
  display: block;
  font-size: var(--menu-font-size, var(--footer-menu-font-size-default));
  font-family: var(--menu-font, var(--footer-menu-font-default));
  color: var(--footer-menu-child-fg, var(--footer-menu-fg));
  text-decoration: none;
  line-height: var(--leading-tight);
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
  text-align: left;
  width: 100%;
  opacity: 1;
  text-transform: var(--menu-text-transform, var(--footer-menu-text-transform-default));
  letter-spacing: var(--menu-letter-spacing, var(--footer-menu-letter-spacing-default));
  position: relative;
}

.footer__menu-link:hover {
  color: var(--footer-menu-fg-hover);
  opacity: 1;
  text-decoration: none;
}

/* Menu style variants (match header menu settings) */
.footer__menu[data-nav-style="pill"] .footer__menu-link {
  text-transform: var(--menu-text-transform, none);
  letter-spacing: var(--menu-letter-spacing, 0.01em);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.footer__menu[data-nav-style="pill"] .footer__menu-link:hover {
  background: color-mix(in srgb, var(--footer-menu-accent) 12%, transparent);
}

.footer__menu[data-nav-style="underline"] .footer__menu-link {
  padding-bottom: 0.35rem;
}

.footer__menu[data-nav-style="underline"] .footer__menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
      var(--footer-menu-accent),
      color-mix(in srgb, var(--footer-menu-accent) 55%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base), opacity var(--transition-base);
  opacity: 0.35;
}

.footer__menu[data-nav-style="underline"] .footer__menu-link:hover::before {
  transform: scaleX(1);
  opacity: 0.7;
}

.footer__menu[data-nav-style="block"] .footer__menu-link {
  text-transform: var(--menu-text-transform, none);
  letter-spacing: var(--menu-letter-spacing, 0.02em);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.footer__menu[data-nav-style="block"] .footer__menu-link:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color: color-mix(in srgb, var(--footer-menu-accent) 18%, var(--border));
}

.footer__menu[data-nav-style="marker"] .footer__menu-link {
  text-transform: var(--menu-text-transform, none);
  letter-spacing: var(--menu-letter-spacing, 0.01em);
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  z-index: 0;
}

.footer__menu[data-nav-style="marker"] .footer__menu-link::before {
  content: "";
  position: absolute;
  left: -0.15rem;
  right: -0.15rem;
  bottom: 0.2rem;
  height: 0.55rem;
  background: color-mix(in srgb, var(--footer-menu-accent) 22%, transparent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base), opacity var(--transition-base);
  opacity: 0.45;
  z-index: -1;
}

.footer__menu[data-nav-style="marker"] .footer__menu-link:hover::before {
  transform: scaleX(1);
  opacity: 0.75;
}

.footer__content {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-normal);
  text-align: center;
  padding-top: var(--space-lg);
  border-top: var(--border-thin) solid var(--preview-card-border);
}

.footer__link {
  color: var(--accent-2);
  font-weight: var(--weight-medium);
}

/* Anúncios */
.advertisements {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg) 0;
  border-top: var(--border-thin) solid var(--preview-card-border);
  border-bottom: var(--border-thin) solid var(--preview-card-border);
}

.advertisement {
  margin-bottom: var(--space-md);
}

.advertisement:last-child {
  margin-bottom: 0;
}

.advertisement__link {
  display: block;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.advertisement__link:hover {
  opacity: 0.9;
}

.advertisement__banner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

/* Carrossel de Anúncios (diferente do de artigos) */
.advertisements-carousel {
  margin: var(--space-md) 0 var(--space-xs) 0;
  padding: var(--space-md) 0 var(--space-sm) 0;
  border-top: var(--border-thin) solid var(--preview-card-border);
  border-bottom: none;
  /* Removido borda inferior */
  --ad-carousel-accent-color: var(--ad-carousel-accent, var(--accent));
  --ad-carousel-title-color: var(--ad-carousel-accent-color);
  --ad-carousel-text-color: var(--muted);
  --ad-carousel-card-bg: var(--ad-carousel-card-bg-override, var(--surface));
  --ad-carousel-border-base: var(--ad-carousel-card-bg);
  --ad-carousel-card-border: color-mix(in srgb, var(--ad-carousel-border-base) 88%, var(--border-ink) 12%);
  --ad-carousel-card-border-strong: color-mix(in srgb, var(--ad-carousel-border-base) 80%, var(--border-ink) 20%);
  --ad-carousel-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Keep image mats transparent so cards don't "fight" the page background (notably in light theme). */
  --ad-carousel-image-bg: transparent;
  --ad-carousel-radius: var(--radius-md);
  --ad-carousel-button-bg: var(--surface);
  --ad-carousel-button-border: var(--ad-carousel-card-border);
  --ad-carousel-button-color: var(--text);
  --ad-carousel-button-hover-bg: var(--surface-2);
  --ad-carousel-button-hover-border: var(--ad-carousel-card-border-strong);
  --ad-carousel-button-hover-color: var(--ad-carousel-accent-color);
}

.advertisements-carousel[data-ad-carousel-style="minimal"] {
  --ad-carousel-card-bg: var(--ad-carousel-card-bg-override, transparent);
  --ad-carousel-border-base: var(--surface);
  --ad-carousel-card-border: color-mix(in srgb, var(--ad-carousel-border-base) 92%, var(--border-ink) 8%);
  --ad-carousel-card-border-strong: color-mix(in srgb, var(--ad-carousel-border-base) 84%, var(--border-ink) 16%);
  --ad-carousel-card-shadow: none;
  --ad-carousel-image-bg: transparent;
  --ad-carousel-button-bg: transparent;
  --ad-carousel-button-border: var(--ad-carousel-card-border);
  --ad-carousel-button-hover-border: var(--ad-carousel-card-border-strong);
  --ad-carousel-button-color: var(--text-2);
  --ad-carousel-button-hover-bg: color-mix(in srgb, var(--ad-carousel-accent-color) 12%, transparent);
}

.advertisements-carousel[data-ad-carousel-style="outline"] {
  --ad-carousel-card-bg: var(--ad-carousel-card-bg-override, transparent);
  --ad-carousel-border-base: var(--surface);
  --ad-carousel-card-border: color-mix(in srgb, var(--ad-carousel-border-base) 80%, var(--border-ink) 20%);
  --ad-carousel-card-border-strong: color-mix(in srgb, var(--ad-carousel-border-base) 72%, var(--border-ink) 28%);
  --ad-carousel-card-shadow: none;
  --ad-carousel-image-bg: transparent;
  --ad-carousel-button-bg: transparent;
  --ad-carousel-button-border: var(--ad-carousel-card-border);
  --ad-carousel-button-hover-border: var(--ad-carousel-card-border-strong);
  --ad-carousel-button-color: var(--ad-carousel-accent-color);
  --ad-carousel-button-hover-bg: color-mix(in srgb, var(--ad-carousel-accent-color) 14%, transparent);
}

.advertisements-carousel[data-ad-carousel-style="soft"] {
  --ad-carousel-card-bg: var(--ad-carousel-card-bg-override, color-mix(in srgb, var(--surface) 78%, var(--bg)));
  --ad-carousel-border-base: var(--ad-carousel-card-bg);
  --ad-carousel-card-border: color-mix(in srgb, var(--ad-carousel-border-base) 90%, var(--border-ink) 10%);
  --ad-carousel-card-border-strong: color-mix(in srgb, var(--ad-carousel-border-base) 82%, var(--border-ink) 18%);
  --ad-carousel-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  --ad-carousel-image-bg: transparent;
  --ad-carousel-radius: 18px;
  --ad-carousel-button-bg: color-mix(in srgb, var(--surface) 85%, var(--bg));
  --ad-carousel-button-border: var(--ad-carousel-card-border);
  --ad-carousel-button-hover-border: var(--ad-carousel-card-border-strong);
}

.advertisements-carousel__header {
  margin-bottom: var(--space-md);
}

.advertisements-carousel__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ad-carousel-title-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-xs) 0;
}

.advertisements-carousel__message {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ad-carousel-text-color);
  margin: 0;
  line-height: var(--leading-normal);
}

/* Anúncio único */
.advertisement-single {
  text-align: center;
}

.advertisement-single__link {
  display: inline-block;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  max-width: 100%;
  position: relative;
  border: 1px solid var(--ad-carousel-card-border);
  border-radius: var(--ad-carousel-radius);
  background: var(--ad-carousel-card-bg);
  padding: var(--space-xs);
  box-shadow: var(--ad-carousel-card-shadow);
}

.advertisement-single__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--ad-carousel-card-border-strong);
}

.advertisement-single__banner {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  object-fit: contain;
  border: 1px solid var(--ad-carousel-card-border);
}

.advertisement-single__description {
  margin-top: var(--space-sm);
  text-align: center;
}

.advertisement-single__description p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ad-carousel-text-color);
  margin: 0;
}

/* Carrossel de anúncios */
.advertisements-carousel .carousel-wrapper {
  position: relative;
}

.advertisements-carousel .carousel-container {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}

.advertisements-carousel .carousel-track {
  display: flex;
  gap: var(--space-md);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.advertisement-item {
  flex: 0 0 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.advertisement-item__link {
  display: block;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  width: 100%;
  border: 1px solid var(--ad-carousel-card-border);
  border-radius: var(--ad-carousel-radius);
  background: var(--ad-carousel-card-bg);
  padding: var(--space-xs);
  box-shadow: var(--ad-carousel-card-shadow);
}

.advertisement-item__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--ad-carousel-card-border-strong);
}

.advertisement-item__image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ad-carousel-image-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ad-carousel-card-border);
}

.advertisement-item__banner {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.advertisement-item__description {
  padding: var(--space-xs) var(--space-xs);
  margin-top: var(--space-xs);
}

.advertisement-item__description p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ad-carousel-text-color);
  margin: 0;
  text-align: center;
}

/* Botões do carrossel de anúncios (menores que os de artigos) */
.ad-carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ad-carousel-button-bg);
  border: 1px solid var(--ad-carousel-button-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-base);
  color: var(--ad-carousel-button-color);
  padding: 0;
}

.ad-carousel-button:hover {
  background: var(--ad-carousel-button-hover-bg);
  border-color: var(--ad-carousel-button-hover-border);
  color: var(--ad-carousel-button-hover-color);
}

.ad-carousel-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ad-carousel-button--prev {
  left: -18px;
}

.ad-carousel-button--next {
  right: -18px;
}

.ad-carousel-button i {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

@media (max-width: 992px) {
  .advertisement-item {
    flex: 0 0 calc(50% - var(--space-md) * 0.5);
    min-width: calc(50% - var(--space-md) * 0.5);
    max-width: calc(50% - var(--space-md) * 0.5);
  }

  /* ... buttons adjustments ... */
}

@media (max-width: 768px) {
  .advertisement-item {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
  }

  /* ... container padding ... */
  .advertisements-carousel .carousel-container {
    padding: 0 var(--space-xs);
  }

  .advertisement-item__image {
    height: 180px;
  }

  .advertisement-item__banner {
    max-height: 180px;
  }

  /* ... ... */
  .ad-carousel-button {
    display: flex;
    /* Show buttons on mobile */
  }

  .advertisements-carousel .carousel-track {
    overflow: visible;
    /* Allow items to exist outside track width so they can be slid into view */
  }

  /* Remove scrollbar hiding since we are not scrolling natively anymore */

  .advertisement-item {
    /* flex adjusted above */
  }
}