/*
Theme Name: Pandara Production
Theme URI: https://pandaraproduction.com
Author: Pandara Production
Description: Official theme for Pandara Production — dark cinematic brand.
Version: 1.0
Requires at least: 6.0
Text Domain: pandara
*/

/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,600;0,700;1,400&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Barlow+Condensed:wght@700;800&display=swap');

/* ── VARIABLES ────────────────────────────────────────────────── */
:root {
  --p-navy:      #050c1a;
  --p-navy2:     #0a1628;
  --p-navy3:     #0f1f3a;
  --p-blue:      #1756db;
  --p-bluelite:  #3a78ff;
  --p-orange:    #f97316;
  --p-orange2:   #fb923c;
  --p-white:     #ffffff;
  --p-gray:      #8899b0;
  --p-graylite:  #c0cfe0;
  --p-font-head: 'Chakra Petch', sans-serif;
  --p-font-cond: 'Barlow Condensed', sans-serif;
  --p-font-body: 'Barlow', sans-serif;
}

/* ── BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, body.elementor-page, .elementor-page .site {
  background-color: var(--p-navy) !important;
  color: var(--p-white) !important;
  font-family: var(--p-font-body) !important;
  margin: 0; padding: 0;
}
img { max-width: 100%; height: auto; display: block; }

/* ── ELEMENTOR CONTAINER ──────────────────────────────────────── */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* ── HEADING WIDGET ───────────────────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--p-font-cond);
  font-weight: 800;
  line-height: 1.1;
}

/* ── TAG LABEL ────────────────────────────────────────────────── */
.p-tag .elementor-heading-title {
  font-family: var(--p-font-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--p-orange) !important;
  line-height: 1.5 !important;
}
.p-tag .elementor-heading-title::before {
  content: '── ';
  opacity: 0.5;
}

/* ── DIVIDER (orange accent) ──────────────────────────────────── */
.p-divider hr {
  border-color: var(--p-orange) !important;
  border-width: 3px !important;
  max-width: 48px !important;
  margin: 0 !important;
}

/* ── HERO SECTION ─────────────────────────────────────────────── */
.p-hero-section {
  position: relative;
  overflow: hidden;
}
.p-hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(23,86,219,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,86,219,.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}
.p-hero-section::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(23,86,219,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(249,115,22,.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.p-hero-section > .elementor-container {
  position: relative;
  z-index: 1;
}

/* ── HERO TEXT ────────────────────────────────────────────────── */
.p-hero-title .elementor-heading-title {
  font-family: var(--p-font-cond) !important;
  font-size: clamp(52px, 8vw, 96px) !important;
  font-weight: 800 !important;
  color: var(--p-white) !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}
.p-hero-tagline .elementor-heading-title {
  font-family: var(--p-font-cond) !important;
  font-size: clamp(26px, 4vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 2px !important;
}
.p-hero-desc .elementor-text-editor p {
  font-size: 17px !important;
  color: var(--p-graylite) !important;
  line-height: 1.7 !important;
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.elementor-widget-button .elementor-button {
  font-family: var(--p-font-head) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}
.p-btn-primary .elementor-button {
  background: var(--p-orange) !important;
  color: var(--p-white) !important;
  border: none !important;
  border-radius: 4px !important;
}
.p-btn-primary .elementor-button:hover {
  background: var(--p-orange2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(249,115,22,0.4) !important;
}
.p-btn-outline .elementor-button {
  background: transparent !important;
  color: var(--p-white) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 4px !important;
}
.p-btn-outline .elementor-button:hover {
  border-color: var(--p-bluelite) !important;
  color: var(--p-bluelite) !important;
}

/* ── HERO STATS ROW ───────────────────────────────────────────── */
.p-stat-col {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 32px !important;
}
.p-counter .elementor-counter-number-wrapper {
  font-family: var(--p-font-cond) !important;
  font-weight: 800 !important;
  font-size: 42px !important;
  color: var(--p-white) !important;
  line-height: 1 !important;
}
.p-counter .elementor-counter-number-suffix {
  color: var(--p-orange) !important;
}
.p-counter .elementor-counter-title {
  font-family: var(--p-font-body) !important;
  font-size: 11px !important;
  color: var(--p-gray) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* ── BIG STATS (portfolio section) ───────────────────────────── */
.p-big-counter .elementor-counter-number-wrapper {
  font-size: 60px !important;
  font-family: var(--p-font-cond) !important;
  font-weight: 800 !important;
  color: var(--p-white) !important;
}
.p-big-counter .elementor-counter-number-suffix {
  color: var(--p-orange) !important;
}
.p-big-counter .elementor-counter-title {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--p-gray) !important;
}
.p-stat-box {
  border-right: 1px solid rgba(255,255,255,.06) !important;
  transition: background .3s;
}
.p-stat-box:hover { background: var(--p-navy3) !important; }

/* ── ABOUT SECTION ────────────────────────────────────────────── */
.p-about-section {
  position: relative;
  overflow: hidden;
}
.p-about-section::before {
  content: '';
  position: absolute;
  left: -200px; top: -100px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,86,219,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.p-about-section > .elementor-container { position: relative; z-index: 1; }

/* ── ICON BOX — SERVICE CARD ──────────────────────────────────── */
.p-service-card {
  transition: transform 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.p-service-card .elementor-icon-box-wrapper {
  padding: 32px 20px !important;
}
.p-service-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--p-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 1;
}
.p-service-card:hover { transform: translateY(-4px) !important; }
.p-service-card:hover::before { transform: scaleX(1) !important; }
.p-service-card .elementor-icon {
  width: 54px !important; height: 54px !important;
  background: rgba(23,86,219,.12) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
.p-service-card .elementor-icon i { color: var(--p-bluelite) !important; font-size: 22px !important; }
.p-service-card .elementor-icon-box-title a,
.p-service-card .elementor-icon-box-title {
  font-family: var(--p-font-head) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--p-white) !important;
  letter-spacing: 0.5px !important;
}
.p-service-card .elementor-icon-box-description {
  font-size: 13px !important;
  color: var(--p-gray) !important;
  line-height: 1.6 !important;
}

/* ── ICON BOX — PILLAR ────────────────────────────────────────── */
.p-pillar .elementor-icon { 
  width: 44px !important; height: 44px !important;
  background: rgba(23,86,219,.15) !important;
  border-radius: 8px !important;
}
.p-pillar .elementor-icon i { color: var(--p-bluelite) !important; font-size: 18px !important; }
.p-pillar .elementor-icon-box-title a,
.p-pillar .elementor-icon-box-title {
  font-family: var(--p-font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--p-bluelite) !important;
  letter-spacing: 1px !important;
}
.p-pillar .elementor-icon-box-description {
  font-size: 13px !important;
  color: var(--p-gray) !important;
  line-height: 1.5 !important;
}

/* ── ICON BOX — PROCESS STEP ──────────────────────────────────── */
.p-process-step .elementor-icon-box-icon { margin-bottom: 24px !important; }
.p-process-step .elementor-icon {
  width: 72px !important; height: 72px !important;
  background: var(--p-navy3) !important;
  border: 2px solid var(--p-blue) !important;
  border-radius: 50% !important;
  transition: background 0.3s, border-color 0.3s !important;
}
.p-process-step .elementor-icon i { color: var(--p-bluelite) !important; font-size: 24px !important; }
.p-process-step:hover .elementor-icon {
  background: var(--p-blue) !important;
}
.p-process-step:hover .elementor-icon i { color: #fff !important; }
.p-process-step .elementor-icon-box-title a,
.p-process-step .elementor-icon-box-title {
  font-family: var(--p-font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--p-bluelite) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.p-process-step .elementor-icon-box-description {
  font-size: 13px !important;
  color: var(--p-gray) !important;
  line-height: 1.6 !important;
}

/* ── IMAGE BOX — PORTFOLIO ────────────────────────────────────── */
.p-portfolio-item { 
  position: relative; 
  overflow: hidden; 
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.p-portfolio-item .elementor-image-box-wrapper {
  background: linear-gradient(to top, rgba(5,12,26,.95) 0%, rgba(5,12,26,.2) 60%, transparent 100%);
  width: 100%;
  padding: 24px !important;
  position: absolute; bottom: 0; left: 0; right: 0;
}
.p-portfolio-item .elementor-image-box-img {
  position: absolute; inset: 0;
  z-index: 0;
}
.p-portfolio-item .elementor-image-box-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.p-portfolio-item .elementor-image-box-content { position: relative; z-index: 1; }
.p-portfolio-item .elementor-image-box-title {
  font-family: var(--p-font-head) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--p-white) !important;
}
.p-portfolio-item .elementor-image-box-description {
  font-size: 12px !important;
  color: var(--p-gray) !important;
}
.p-portfolio-item:hover .elementor-image-box-img img {
  transform: scale(1.05);
  transition: transform 0.6s ease;
}

/* ── BIG PORTFOLIO (first item, taller) ───────────────────────── */
.p-portfolio-big {
  min-height: 420px !important;
}

/* ── CLIENT IMAGE ─────────────────────────────────────────────── */
.p-client-img .elementor-image img {
  filter: grayscale(1) brightness(0.55);
  transition: filter 0.3s;
  margin: 0 auto;
  max-height: 36px;
  width: auto;
}
.p-client-img:hover .elementor-image img {
  filter: grayscale(0) brightness(1);
}
.p-client-cell {
  border: 1px solid rgba(255,255,255,.06);
  transition: background 0.3s;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
}
.p-client-cell:hover { background: var(--p-navy3) !important; }
/* Client text fallback (before logo upload) */
.p-client-cell .elementor-heading-title {
  font-family: var(--p-font-head) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  color: var(--p-gray) !important;
  text-transform: uppercase !important;
}
.p-client-cell:hover .elementor-heading-title { color: var(--p-white) !important; }

/* ── TESTIMONIAL BOX ──────────────────────────────────────────── */
.p-testimonial-section {
  border-left: 4px solid var(--p-orange) !important;
}
.p-testimonial-text .elementor-text-editor {
  font-size: 17px !important;
  font-style: italic !important;
  color: var(--p-graylite) !important;
  line-height: 1.7 !important;
}
.p-testimonial-name .elementor-heading-title {
  font-family: var(--p-font-head) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--p-white) !important;
}
.p-testimonial-role .elementor-heading-title {
  font-family: var(--p-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--p-orange) !important;
  letter-spacing: 0 !important;
}

/* ── CTA SECTION ──────────────────────────────────────────────── */
.p-cta-section {
  position: relative;
  overflow: hidden;
}
.p-cta-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,86,219,.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.p-cta-section > .elementor-container { position: relative; z-index: 1; }

/* ── ABOUT BIG TEXT ───────────────────────────────────────────── */
.p-about-bigtext .elementor-heading-title {
  font-family: var(--p-font-cond) !important;
  font-size: clamp(70px, 10vw, 130px) !important;
  font-weight: 800 !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(23,86,219,.22) !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  user-select: none !important;
}

/* ── ABOUT QUOTE CARD ─────────────────────────────────────────── */
.p-about-quote {
  background: rgba(10,22,40,0.9) !important;
  border: 1px solid rgba(23,86,219,.3) !important;
  border-left: 3px solid var(--p-blue) !important;
}
.p-about-quote .elementor-text-editor {
  font-style: italic !important;
  font-size: 15px !important;
  color: var(--p-graylite) !important;
  line-height: 1.6 !important;
}

/* ── SECTION TITLE ────────────────────────────────────────────── */
.p-section-title .elementor-heading-title {
  font-family: var(--p-font-cond) !important;
  font-weight: 800 !important;
}

/* ── PROCESS LINE ─────────────────────────────────────────────── */
.p-process-section { position: relative; }
.p-process-track {
  position: relative;
}
.p-process-track::before {
  content: '';
  position: absolute;
  top: 36px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, var(--p-blue) 0%, var(--p-orange) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ── SECTION GLOW ─────────────────────────────────────────────── */
.p-glow-left { position: relative; overflow: hidden; }
.p-glow-left::before {
  content: '';
  position: absolute;
  left: -200px; top: -100px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,86,219,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.p-footer-section {
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.p-footer-copy .elementor-text-editor {
  font-size: 13px !important;
  color: var(--p-gray) !important;
}
.p-social-icon .elementor-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  transition: border-color 0.3s, color 0.3s !important;
}
.p-social-icon .elementor-icon:hover {
  border-color: var(--p-orange) !important;
}
.p-social-icon .elementor-icon i { 
  color: var(--p-gray) !important;
  font-size: 13px !important;
}
.p-social-icon .elementor-icon:hover i { color: var(--p-orange) !important; }

/* ── ELEMENTOR SECTION DARK BORDER ────────────────────────────── */
.p-section-border {
  border-top: 1px solid rgba(255,255,255,.05) !important;
}