/*
Theme Name: InstaDL
Description: Tema WordPress para download de vídeos do Instagram - InstaDL
Author: InstaDL Team
Version: 1.0
Text Domain: instadl
*/

/* Remove Tailwind imports - they can conflict with WordPress */

/* Custom CSS Variables - Instagram Brand Colors */
:root {
  --background: 240 10% 8%;
  --foreground: 0 0% 95%;
  --card: 240 10% 12%;
  --card-foreground: 0 0% 95%;
  --popover: 240 10% 12%;
  --popover-foreground: 0 0% 95%;
  
  /* Instagram Brand Colors - Enhanced for dark theme */
  --instagram-purple: 270 91% 58%;
  --instagram-pink: 352 85% 64%; 
  --instagram-orange: 31 100% 70%;
  --instagram-yellow: 45 100% 80%;

  --primary: 270 91% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 352 85% 64%;
  --secondary-foreground: 0 0% 100%;
  --muted: 240 10% 16%;
  --muted-foreground: 240 5% 65%;
  --accent: 31 100% 70%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 10% 20%;
  --input: 240 10% 18%;
  --ring: 270 91% 58%;

  /* Instagram Gradients */
  --gradient-instagram: linear-gradient(135deg, hsl(var(--instagram-purple)), hsl(var(--instagram-pink)), hsl(var(--instagram-orange)), hsl(var(--instagram-yellow)));
  --gradient-instagram-soft: linear-gradient(135deg, hsl(var(--instagram-purple) / 0.2), hsl(var(--instagram-pink) / 0.1));
  --gradient-hero: linear-gradient(135deg, hsl(var(--instagram-purple)), hsl(var(--instagram-pink)));
  --gradient-dark: linear-gradient(135deg, hsl(240 10% 6%), hsl(240 10% 12%));

  /* Effects */
  --shadow-instagram: 0 10px 40px hsl(var(--instagram-purple) / 0.4);
  --shadow-glow: 0 0 30px hsl(var(--instagram-pink) / 0.5);
  
  --radius: 1rem;
}

/* Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

/* Container and Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section {
  padding: 4rem 0;
}

/* Instagram Gradient Classes */
.bg-gradient-instagram {
  background: var(--gradient-instagram);
}

.bg-gradient-instagram-soft {
  background: var(--gradient-instagram-soft);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-dark {
  background: var(--gradient-dark);
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-y-8 > * + * {
  margin-top: 2rem;
}

/* Grid */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

/* Spacing */
.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

/* Text */
.text-center {
  text-align: center;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

/* Width */
.w-full {
  width: 100%;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Positioning */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Rounded */
.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.text-gradient-instagram {
  background: var(--gradient-instagram);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card Styles */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--gradient-instagram);
  color: white;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
  opacity: 0.9;
}

/* Form Styles */
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
}

.form-control:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Header Styles */
.site-header {
  background-color: hsl(var(--background) / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Footer Styles */
.site-footer {
  background-color: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  margin-top: 4rem;
}

/* Hero Section */
.hero-section {
  position: relative;
  padding: 5rem 0 8rem;
  background: var(--gradient-dark);
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-instagram-soft);
}

/* Feature Cards */
.feature-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-instagram);
}

.feature-icon {
  width: 4rem;
  height: 4rem;
  background: var(--gradient-instagram);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 0 5rem;
  }
  
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* WordPress Specific */
.wp-block-group {
  margin-bottom: 2rem;
}

.wp-block-heading {
  margin-bottom: 1rem;
}

.wp-block-paragraph {
  margin-bottom: 1rem;
}