/*
Theme Name: Pomogrenate
Theme URI: https://promogranade.com
Author: Promogranade
Author URI: https://promogranade.com
Description: AI-powered digital marketing agency theme — dark design with Elementor support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pomogrenate
Tags: dark, portfolio, business, elementor, one-column, custom-logo, custom-menu
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — DESIGN SYSTEM
   Ported from Next.js globals.css
   ============================================================ */
:root {
  /* Brand Colors */
  --color-brand-orange: #FF6B00;
  --color-brand-yellow: #FFD000;
  --color-brand-green: #00C853;
  --color-brand-teal: #00BCD4;
  --color-brand-blue: #1565C0;
  --color-brand-purple: #8B2FC9;
  --color-brand-red: #CC2200;

  /* Background Shades */
  --color-brand-bg: #08080F;
  --color-brand-bg-mid: #0F0F1A;
  --color-brand-bg-up: #151525;
  --color-brand-bg-border: #1E1E35;

  /* Text Colors */
  --color-brand-white: #FFFFFF;
  --color-brand-off-white: #F0EFFF;
  --color-brand-gray: #9CA3AF;
  --color-brand-gray-dark: #6B7280;
  --color-brand-light: #F8F8FF;

  /* Fonts */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #FF6B00, #FFD000, #00C853, #00BCD4, #1565C0, #8B2FC9);
  --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(139,47,201,0.3) 0%, rgba(8,8,15,0) 70%);
  --gradient-card: linear-gradient(135deg, rgba(139,47,201,0.1), rgba(21,101,192,0.1));
  --gradient-text: linear-gradient(90deg, #FF6B00, #FFD000, #00C853, #00BCD4, #8B2FC9);
  --gradient-btn: linear-gradient(135deg, #FF6B00 0%, #CC2200 100%);
  --gradient-teal: linear-gradient(135deg, #00BCD4 0%, #1565C0 100%);

  /* Shadows */
  --shadow-glow-orange: 0 0 30px rgba(255,107,0,0.4);
  --shadow-glow-purple: 0 0 30px rgba(139,47,201,0.4);
  --shadow-glow-teal: 0 0 30px rgba(0,188,212,0.4);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 8px 40px rgba(139,47,201,0.2);
  --shadow-btn: 0 4px 20px rgba(255,107,0,0.4);
  --shadow-btn-hover: 0 8px 30px rgba(255,107,0,0.6);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(139,47,201,0.3); }
  50% { box-shadow: 0 0 40px rgba(139,47,201,0.7); }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-radius, 170px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-radius, 170px)) rotate(-360deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================================
   BASE STYLES
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-off-white);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand-white);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(139,47,201,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,47,201,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.btn-gradient {
  background: var(--gradient-btn);
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: all 0.2s ease;
}
.btn-gradient:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: scale(1.02);
}
.btn-gradient:active { transform: scale(0.98); }

.btn-outline {
  background: transparent;
  color: var(--color-brand-off-white);
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--color-brand-bg-border);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  border-color: var(--color-brand-purple);
  color: #fff;
}

.btn-whatsapp {
  background: var(--color-brand-green);
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-whatsapp:hover { opacity: 0.9; }

.section-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid rgba(139,47,201,0.3);
  color: var(--color-brand-purple);
  background: rgba(139,47,201,0.1);
}

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) {
  .container { padding: 0 1.5rem; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-brand-bg); }
::-webkit-scrollbar-thumb { background: var(--color-brand-purple); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a044e0; }

::selection { background: rgba(255,107,0,0.3); color: #FFFFFF; }

/* ============================================================
   NOISE OVERLAY
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ============================================================
   WORDPRESS CONTENT STYLES
   For blog posts rendered via the_content()
   ============================================================ */
.wp-content {
  color: var(--color-brand-gray);
  line-height: 1.8;
  font-size: 1rem;
}
.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.wp-content h2 { font-size: 1.5rem; }
.wp-content h3 { font-size: 1.25rem; }
.wp-content h4 { font-size: 1.125rem; }
.wp-content p { margin-bottom: 1.5rem; }
.wp-content a { color: var(--color-brand-purple); text-decoration: underline; transition: color 0.2s; }
.wp-content a:hover { color: #FFFFFF; }
.wp-content strong, .wp-content b { color: var(--color-brand-off-white); font-weight: 600; }
.wp-content em, .wp-content i { font-style: italic; }
.wp-content ul, .wp-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.wp-content ul { list-style-type: disc; }
.wp-content ol { list-style-type: decimal; }
.wp-content li { margin-bottom: 0.5rem; }
.wp-content blockquote {
  border-left: 3px solid var(--color-brand-purple);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--color-brand-off-white);
  font-style: italic;
}
.wp-content img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--color-brand-bg-border);
  margin: 2rem 0;
}
.wp-content figure { margin: 2rem 0; }
.wp-content figcaption { text-align: center; font-size: 0.875rem; color: var(--color-brand-gray-dark); margin-top: 0.5rem; }
.wp-content pre {
  background: var(--color-brand-bg-mid);
  border: 1px solid var(--color-brand-bg-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
  font-size: 0.875rem;
}
.wp-content code { background: var(--color-brand-bg-mid); padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.875rem; color: var(--color-brand-off-white); }
.wp-content pre code { background: none; padding: 0; }
.wp-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.wp-content th, .wp-content td { border: 1px solid var(--color-brand-bg-border); padding: 0.75rem 1rem; text-align: left; }
.wp-content th { background: var(--color-brand-bg-mid); color: #FFFFFF; font-weight: 600; }
.wp-content hr { border: none; border-top: 1px solid var(--color-brand-bg-border); margin: 2.5rem 0; }

/* ============================================================
   CUSTOM CURSOR (desktop only)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
  input, textarea, select { cursor: text !important; }
}