/*
 * Flareo Studio – Elementor Integration CSS
 * Ensures Elementor widgets render with Flareo design system tokens
 */

/* ============================================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================================ */

/* Force design tokens into Elementor's scope */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap {
  --e-global-color-primary:   oklch(0.62 0.27 305);
  --e-global-color-secondary: oklch(0.7 0.2 240);
  --e-global-color-text:      oklch(0.98 0.01 280);
  --e-global-color-accent:    oklch(0.7 0.25 330);
}

/* Elementor default heading */
.elementor-heading-title {
  font-family: var(--flr-font) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}

/* Elementor buttons */
.elementor-button {
  font-family: var(--flr-font) !important;
  border-radius: var(--flr-radius-full) !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* ============================================================
   ELEMENTOR SECTION BACKGROUNDS
   ============================================================ */

/* Dark sections — used in most of the site */
.elementor-section.flr-dark-section {
  background-color: var(--flr-bg) !important;
}

/* Glass section */
.elementor-section.flr-glass-section > .elementor-container {
  background: linear-gradient(160deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.02));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: var(--flr-radius-xl);
}

/* ============================================================
   ELEMENTOR EDITOR PREVIEW FIXES
   ============================================================ */

/* Ensure dark background in editor */
.elementor-editor-active body {
  background-color: var(--flr-bg) !important;
  color: var(--flr-fg) !important;
}

/* ============================================================
   CUSTOM ELEMENTOR WIDGET CONTAINERS
   ============================================================ */

/* Hero widget wrapper */
.flr-elementor-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

/* Stats counter widget */
.flr-elementor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Project grid widget */
.flr-elementor-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .flr-elementor-projects { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .flr-elementor-projects { grid-template-columns: 1fr; }
  .flr-elementor-stats { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}

/* Social channels widget */
.flr-elementor-social {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1024px) {
  .flr-elementor-social { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .flr-elementor-social { grid-template-columns: repeat(2, 1fr); }
}

/* Gallery lightbox widget */
.flr-elementor-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .flr-elementor-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .flr-elementor-gallery { grid-template-columns: 1fr; }
}

/* Content grid widget */
.flr-elementor-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .flr-elementor-content-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .flr-elementor-content-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ELEMENTOR FORM OVERRIDE
   ============================================================ */
.elementor-form .elementor-field-type-text input,
.elementor-form .elementor-field-type-email input,
.elementor-form .elementor-field-type-textarea textarea {
  background: linear-gradient(160deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.02)) !important;
  border: 1px solid oklch(1 0 0 / 0.08) !important;
  border-radius: var(--flr-radius-full) !important;
  color: var(--flr-fg) !important;
  font-family: var(--flr-font) !important;
}

.elementor-form .elementor-field-type-textarea textarea {
  border-radius: var(--flr-radius-xl) !important;
}

.elementor-form .elementor-field-type-text input:focus,
.elementor-form .elementor-field-type-email input:focus,
.elementor-form .elementor-field-type-textarea textarea:focus {
  box-shadow:
    inset 0 0 0 1px oklch(0.62 0.27 305 / 0.4),
    0 0 20px -4px oklch(0.62 0.27 305 / 0.6) !important;
  outline: none !important;
}

.elementor-form .elementor-button {
  background: linear-gradient(135deg, var(--flr-primary), var(--flr-secondary)) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 0 20px -4px oklch(0.62 0.27 305 / 0.4);
}

.elementor-form .elementor-button:hover {
  box-shadow: 0 0 30px -2px oklch(0.62 0.27 305 / 0.6) !important;
}