/* ==========================================================================
   Lumiq Theme — CSS Complementar
   Regras que theme.json não suporta: media queries, pseudo-elementos,
   seletores complexos, animações, megamenu.
   Para cores e tipografia, usar custom properties do theme.json.
   ========================================================================== */

/* --- Skip Link (acessibilidade) --- */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background-color: var(--wp--preset--color--ouro-velho);
  color: var(--wp--preset--color--branco-quente);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* --- Sticky Header --- */

header.wp-block-group {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- Megamenu --- */

.has-megamenu .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--branco-quente);
  border-top: 2px solid var(--wp--preset--color--ouro-velho);
  box-shadow: 0 8px 32px rgba(26, 26, 26, 0.12);
  padding: 2rem;
  min-width: 600px;
}

.has-megamenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--small);
  text-transform: none;
  letter-spacing: normal;
  color: var(--wp--preset--color--grafite);
}

.has-megamenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--ouro-velho);
}

/* --- Mobile Responsividade --- */

@media (max-width: 781px) {
  /* Header mobile: logo centralizado */
  .wp-block-site-title {
    text-align: center;
    width: 100%;
  }

  /* Hero: texto centralizado em mobile */
  .lumiq-hero-content {
    text-align: center;
  }

  /* Hero: stack columns verticalmente */
  .lumiq-hero-content .wp-block-columns {
    flex-direction: column;
  }

  /* Grid de produtos: 2 colunas em tablet */
  .wc-block-grid.has-4-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Coleções: 2 colunas em tablet */
  .lumiq-colecoes .wp-block-columns {
    flex-wrap: wrap;
  }

  .lumiq-colecoes .wp-block-column {
    flex-basis: 48%;
  }
}

@media (max-width: 480px) {
  /* Mobile pequeno: 1 coluna para tudo */
  .wc-block-grid.has-4-columns {
    grid-template-columns: 1fr;
  }

  .lumiq-colecoes .wp-block-column {
    flex-basis: 100%;
  }

  /* Hero headline menor em mobile */
  .lumiq-hero-content h1 {
    font-size: 2rem;
  }
}

/* --- Animações de entrada --- */

@keyframes lumiq-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lumiq-animate-in {
  animation: lumiq-fade-in 0.6s ease forwards;
}

/* --- WooCommerce Customizações --- */

/* Preço com desconto: estilo Lumiq */
.wc-block-grid__product-price del {
  color: var(--wp--preset--color--prata-fosca);
  font-weight: 400;
}

.wc-block-grid__product-price ins {
  color: var(--wp--preset--color--obsidiana);
  font-weight: 600;
  text-decoration: none;
}

/* Badge de promoção */
.wc-block-grid__product .wc-block-grid__product-onsale {
  background-color: var(--wp--preset--color--ouro-velho);
  color: var(--wp--preset--color--branco-quente);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0.25rem 0.75rem;
}

/* Rating stars: cor Ouro Velho */
.wc-block-grid__product .star-rating span::before,
.wc-block-components-product-rating .wc-block-components-product-rating__stars span::before {
  color: var(--wp--preset--color--ouro-velho);
}

/* Add to cart button — herda estilo do theme.json button */
.wc-block-grid__product .wp-block-button__link {
  font-family: var(--wp--preset--font-family--inter);
}

/* Product tabs: estilo Lumiq */
.woocommerce-tabs .tabs li a {
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--prata-fosca);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
  color: var(--wp--preset--color--obsidiana);
  border-bottom-color: var(--wp--preset--color--ouro-velho);
}

/* Quantity input */
.woocommerce .quantity .qty {
  font-family: var(--wp--preset--font-family--inter);
  border-color: var(--wp--preset--color--prata-fosca);
  border-radius: 2px;
}

/* --- Block Styles (CSS para estilos registrados em functions.php) --- */

/* Card Escuro */
.is-style-lumiq-card-escuro {
  background-color: var(--wp--preset--color--obsidiana);
  color: var(--wp--preset--color--branco-quente);
  padding: 2rem;
  border-radius: 2px;
}

.is-style-lumiq-card-escuro h1,
.is-style-lumiq-card-escuro h2,
.is-style-lumiq-card-escuro h3,
.is-style-lumiq-card-escuro h4 {
  color: var(--wp--preset--color--branco-quente);
}

/* Card Claro */
.is-style-lumiq-card-claro {
  background-color: var(--wp--preset--color--branco-quente);
  color: var(--wp--preset--color--obsidiana);
  padding: 2rem;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.08);
}

/* Botão Outline */
.is-style-lumiq-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--ouro-velho);
  border: 1px solid var(--wp--preset--color--ouro-velho);
}

.is-style-lumiq-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--ouro-velho);
  color: var(--wp--preset--color--branco-quente);
}