/*
Theme Name: Supermercado Pedro e Diana
Theme URI: https://agilstore.pt
Author: Agilstore
Author URI: https://agilstore.pt
Description: Tema WordPress customizado para o Supermercado Pedro e Diana, baseado em React/Tailwind.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: superl-pedro-e-diana
*/

/* Tailwind CSS Variables & Resets */
:root {
  --color-brand-blue: #BF5C14;
  --color-brand-terracotta: #BF5C14;
  --color-brand-terracotta-dark: #A64F12;
  --color-brand-yellow: #ECAE2C;
  --color-brand-yellow-dark: #D99B19;
  --color-brand-red: #D63333;
  --color-brand-green: #4A7C38;
  --color-brand-dark: #241710;
  --color-brand-sand: #F5ECD7;
  --color-brand-cream: #FAF6EE;
  --color-brand-text: #2D1C10;
  --color-brand-muted: #6E5A4D;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: #FAF6EE;
  color: #2D1C10;
  overflow-x: hidden;
  width: 100%;
}

/* Custom Hex BG based on index.css */
.hex-bg {
  background-color: #0099cc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%230088bb' fill-opacity='0.4' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9l11-6.35 11 6.35V30.6l-11 6.35L3 30.6V17.9z'/%3E%3C/svg%3E");
}

/* Fade-in animations */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Responsividade de Grid Nativa garantida */
.grid {
  display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:hidden {
    display: none !important;
  }
  .md\:flex {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}