/*
Theme Name: AI Craft Cloud
Theme URI: https://aicraftcloud.com
Description: Unified futuristic cosmic design system combining the best of all 3 iterations
Author: AI Craft Cloud Design Team
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-craft-cloud
*/

/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. FONT IMPORTS
   2. GLOBAL DESIGN TOKENS (VARIABLES)
   3. CSS RESET & BASE STYLES
   4. LAYOUT UTILITIES
   5. TYPOGRAPHY HELPERS
   6. REUSABLE COMPONENTS (Buttons, Pills, Panels)
   7. NAVIGATION BAR
   8. HERO SECTION
   9. FEATURED INITIATIVES (Cards)
   10. FOOTER SECTION
   11. RESPONSIVE BREAKPOINTS
   12. ACCESSIBILITY & MOTION PREFERENCES
   13. WORDPRESS/GUTENBERG SPECIFICS
   ============================================ */


/* ============================================
   1. FONT IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800;900&display=swap');


/* ============================================
   2. GLOBAL DESIGN TOKENS (VARIABLES)
   ============================================ */
:root {
  /* BRAND COLORS (merged & refined) */
  --neon-cyan:   #34e8ff;    /* Primary accent */
  --neon-orange: #ff7a18;    /* Secondary accent */
  --neon-green:  #2dff8f;    /* Tertiary accent */
  --violet:      #c378ff;    /* Supporting accent */
  
  --deep-purple-bg: #2a0b45; /* Top gradient layer */
  --purple-2:       #1a0a2e; /* Mid gradient layer */
  --dark-navy-bg:   #07131f; /* Base background */
  --space-black:    #030611; /* Deep shadow/overlay */

  /* TEXT COLORS */
  --text:     rgba(255,255,255,0.92); /* Primary text */
  --muted:    rgba(255,255,255,0.72); /* Secondary text */
  --faint:    rgba(255,255,255,0.56); /* Tertiary text */

  /* SURFACES & BORDERS */
  --card-bg:     rgba(10, 10, 25, 0.55);
  --card-bg-2:   rgba(28, 12, 56, 0.45);
  --glass:       rgba(255,255,255,0.06);
  --border:      rgba(255,255,255,0.14);
  --border-2:    rgba(255,255,255,0.10);

  /* TYPOGRAPHY */
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.25rem;

  /* SPACING */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 64px;

  /* LAYOUT */
  --container: 1160px;
  --pad-x: clamp(16px, 3vw, 28px);

  /* RADIUS */
  --r-1: 12px;
  --r-2: 18px;
  --r-3: 26px;
  --r-pill: 999px;

  /* SHADOWS & GLOW */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-hard: 0 18px 60px rgba(0,0,0,0.55);
  --glow-cyan:   0 0 14px rgba(52,232,255,0.55), 0 0 36px rgba(52,232,255,0.35);
  --glow-green:  0 0 14px rgba(45,255,143,0.52), 0 0 36px rgba(45,255,143,0.28);
  --glow-orange: 0 0 14px rgba(255,122,24,0.52), 0 0 36px rgba(255,122,24,0.28);
  --glow-violet: 0 0 14px rgba(195,120,255,0.45), 0 0 36px rgba(195,120,255,0.25);

  /* MOTION */
  --t-fast: 180ms;
  --t-med:  320ms;
  --ease:   cubic-bezier(.2,.8,.2,1);

  /* Z-INDEX */
  --z-nav:    50;
  --z-overlay:100;
}


/* ============================================
   3. CSS RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--dark-navy-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--text);
  margin: 0 0 var(--s-4);
}

p {
  margin: 0 0 var(--s-4);
  color: var(--muted);
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

button, input, textarea, select {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  border-radius: var(--r-1);
}


/* ============================================
   4. LAYOUT UTILITIES
   ============================================ */
.acc-container {
  width: min(var(--container), calc(100% - (var(--pad-x) * 2)));
  margin-inline: auto;
}

.acc-section {
  position: relative;
  padding: var(--s-8) 0;
}

.acc-section--tight {
  padding: var(--s-7) 0;
}

/* Full-site cosmic background (apply to top-level Group block) */
.acc-site-bg {
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(255, 0, 200, 0.10), transparent 60%),
    radial-gradient(1000px 500px at 80% 30%, rgba(52,232,255,0.10), transparent 55%),
    radial-gradient(1000px 700px at 45% 80%, rgba(45,255,143,0.06), transparent 60%),
    linear-gradient(180deg, var(--deep-purple-bg) 0%, var(--purple-2) 35%, var(--dark-navy-bg) 100%);
}

/* Glowing section divider */
.acc-divider-glow {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(52,232,255,0.55),
    rgba(255,122,24,0.45),
    rgba(45,255,143,0.45),
    transparent
  );
  opacity: 0.6;
  margin: var(--s-6) 0;
}

/* Energy lines accent (for hero bottom) */
.acc-energy-lines {
  height: 220px;
  opacity: 0.55;
  background:
    radial-gradient(600px 90px at 50% 70%, rgba(52,232,255,0.18), transparent 65%),
    radial-gradient(600px 90px at 30% 60%, rgba(255,122,24,0.14), transparent 65%),
    radial-gradient(600px 90px at 70% 60%, rgba(45,255,143,0.12), transparent 65%);
}


/* ============================================
   5. TYPOGRAPHY HELPERS
   ============================================ */
.acc-h1 {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 10px 40px rgba(0,0,0,0.55);
}

.acc-h2 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.acc-lead {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.6;
  color: var(--muted);
}

.acc-text-muted { color: var(--muted); }
.acc-text-faint { color: var(--faint); }

.acc-text-gradient-cyan {
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(52,232,255,0.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.acc-text-gradient-purple {
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(195,120,255,0.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.acc-accent-fred {
  color: var(--neon-green);
  text-shadow: 0 0 18px rgba(45,255,143,0.30);
}

.acc-accent-alloy {
  color: var(--neon-orange);
  text-shadow: 0 0 18px rgba(255,122,24,0.25);
}


/* ============================================
   6. REUSABLE COMPONENTS
   ============================================ */
/* Pills */
.acc-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neon-cyan);
  background: rgba(15, 23, 42, 0.85);
  margin-bottom: var(--s-2);
}

/* Buttons */
.acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(10, 10, 25, 0.55);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-soft);
  transition: 
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  cursor: pointer;
}

.acc-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  filter: brightness(1.06);
}

.acc-btn:active {
  transform: translateY(0) scale(0.99);
}

.acc-btn--primary {
  border-color: rgba(52,232,255,0.40);
  box-shadow: var(--shadow-soft), var(--glow-cyan);
  background: linear-gradient(180deg, rgba(52,232,255,0.18), rgba(52,232,255,0.06));
}

.acc-btn--secondary {
  border-color: rgba(195,120,255,0.38);
  box-shadow: var(--shadow-soft), var(--glow-violet);
  background: linear-gradient(180deg, rgba(195,120,255,0.18), rgba(195,120,255,0.06));
}
.acc-btn--fred {
  border-color: rgba(45,255,143,0.38);
  box-shadow: var(--shadow-soft), var(--glow-green);
  background: linear-gradient(180deg, rgba(45,255,143,0.18), rgba(45,255,143,0.06));
}

.acc-btn--alloy {
  border-color: rgba(255,122,24,0.38);
  box-shadow: var(--shadow-soft), var(--glow-orange);
  background: linear-gradient(180deg, rgba(255,122,24,0.18), rgba(255,122,24,0.06));
}

/* Cards */
.acc-card {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-2);
  border: 1px solid var(--border-2);
  background: var(--card-bg);
  box-shadow: var(--shadow-hard);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  overflow: hidden;
}

.acc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard), 0 0 24px rgba(255,255,255,0.08);
}

.acc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--violet), var(--neon-green));
  opacity: 0.8;
}

.acc-card--alt {
  background: var(--card-bg-2);
  border-color: rgba(195,120,255,0.22);
}


/* ============================================
   7. NAVIGATION BAR
   ============================================ */
.acc-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding: var(--s-3) 0;
  background: linear-gradient(180deg, var(--space-black), transparent);
}

.acc-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.acc-nav-logo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text);
}

.acc-nav-links {
  display: flex;
  gap: var(--s-5);
  align-items: center;
}

.acc-nav-link {
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--t-fast) var(--ease);
}

.acc-nav-link:hover {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(52,232,255,0.35);
}


/* ============================================
   8. HERO SECTION
   ============================================ */
.acc-hero {
  position: relative;
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}

.acc-hero-title {
  margin-bottom: var(--s-5);
}

.acc-hero-lead {
  max-width: 700px;
  margin: 0 auto var(--s-6);
}

.acc-hero-actions {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================
   9. FEATURED INITIATIVES (Cards)
   ============================================ */
.acc-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-6);
}


/* ============================================
   10. FOOTER SECTION
   ============================================ */
.acc-footer {
  padding: var(--s-7) 0 var(--s-5);
  background: var(--space-black);
  border-top: 1px solid var(--border);
}

.acc-footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6);
}

.acc-footer-heading {
  font-size: var(--fs-lg);
  margin-bottom: var(--s-4);
}

.acc-footer-copyright {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-2);
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-sm);
}


/* ============================================
   11. RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 768px) {
  .acc-nav-links {
    display: none; /* Hide links on mobile - add hamburger menu later if needed */
  }

  .acc-h1 {
    font-size: clamp(28px, 6vw, 48px);
  }

  .acc-features-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   12. ACCESSIBILITY & MOTION PREFERENCES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ============================================
   13. WORDPRESS/GUTENBERG SPECIFICS
   ============================================ */
.wp-block-group {
  margin: 0;
  padding: 0;
}

.wp-block-button__link {
  border-radius: var(--r-pill) !important;
  padding: var(--s-3) var(--s-5) !important;
  font-weight: 700 !important;
}