/* =========================================================================
   YADAV JI PACKERS AND MOVERS — Theme CSS
   Enqueued by functions.php via wp_enqueue_style('ppm-custom', ...).
   Tailwind utility classes (loaded from CDN) handle layout/spacing; this
   file holds brand tokens + the handful of effects Tailwind utilities
   can't express alone (watermark text, custom carousel arrows, etc).
   ========================================================================= */

:root{
  --ppm-red:      #E31E24;
  --ppm-red-dark: #B8171C;
  --ppm-navy:     #151B2E;
  --ppm-charcoal: #1B1B1B;
  --ppm-light:    #EEF1F5;
  --ppm-gray:     #5B6270;
  --ppm-white:    #FFFFFF;

  --ppm-font-display: 'Oswald', sans-serif;   /* hero / uppercase statements */
  --ppm-font-heading: 'Poppins', sans-serif;  /* H2/H3, buttons, eyebrows   */
  --ppm-font-body:    'Roboto', sans-serif;   /* paragraphs, form fields    */
}

body{
  font-family: var(--ppm-font-body);
  color: var(--ppm-gray);
}
h1,h2,h3,h4,.ppm-heading{
  font-family: var(--ppm-font-heading);
  color: var(--ppm-navy);
}
.ppm-display{
  font-family: var(--ppm-font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Eyebrow label used above every section heading (Elementor: Icon List or
   two Text Editor widgets side by side inside an inline-flex container) */
.ppm-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--ppm-red);
  font-family: var(--ppm-font-heading);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.5px;
  text-transform:capitalize;
}
.ppm-eyebrow::after{
  content:"";
  display:inline-block;
  width:36px;
  height:2px;
  background: var(--ppm-red);
}

/* Watermark background text — Elementor: Heading widget, absolute position
   via Advanced > Position, or a background layer on the Section */
.ppm-watermark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.ppm-watermark span{
  font-family: var(--ppm-font-display);
  font-weight:700;
  font-size:clamp(60px,12vw,160px);
  color: var(--ppm-navy);
  opacity:0.04;
  white-space:nowrap;
}

/* Buttons — map to Elementor "Button" widget styles */
.ppm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--ppm-font-heading);
  font-weight:600;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:0.5px;
  padding:14px 30px;
  border-radius:3px;
  transition:all .2s ease;
}
.ppm-btn-primary{ background: var(--ppm-red); color:#fff; }
.ppm-btn-primary:hover{ background: var(--ppm-red-dark); }
.ppm-btn-dark{ background: var(--ppm-charcoal); color:#fff; }
.ppm-btn-dark:hover{ background:#000; }

/* Icon-feature card left accent block (Elementor: Icon Box widget,
   "Icon Position: Left", style the icon wrapper to a red square) */
.ppm-icon-box .ppm-icon-wrap{
  background: var(--ppm-red);
  color:#fff;
  width:52px;
  height:52px;
  min-width:52px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

/* Image-label card — red bar overlapping bottom-left of an image
   (Elementor: Image widget + Text Editor absolutely positioned, or the
   "Image Box" widget with caption styled as an overlay) */
.ppm-image-label{ position:relative; }
.ppm-image-label .ppm-tag{
  position:absolute;
  left:0;
  bottom:16px;
  background: var(--ppm-red);
  color:#fff;
  font-family: var(--ppm-font-heading);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
}

/* Stat counter block (Elementor: Counter widget) */
.ppm-stat-number{
  font-family: var(--ppm-font-display);
  color: var(--ppm-red);
  font-weight:700;
  font-size:clamp(32px,4vw,52px);
  line-height:1;
}

/* Testimonial card (Elementor: Testimonial widget, dark skin) */
.ppm-testimonial{
  background: var(--ppm-charcoal);
  color:#fff;
}
.ppm-testimonial .ppm-quote-icon{ color: var(--ppm-red); font-size:32px; }

/* Slider / carousel arrows (Elementor: Slides widget nav arrows, restyle
   via Advanced > Custom CSS on the widget, or globally here) */
.ppm-nav-arrow{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
  transition:all .2s ease;
}
.ppm-nav-arrow:hover{ background: var(--ppm-red); border-color: var(--ppm-red); }
.ppm-nav-arrow-dark{ border-color: rgba(21,27,46,0.25); color: var(--ppm-navy); }
.ppm-nav-arrow-dark:hover{ background: var(--ppm-red); border-color: var(--ppm-red); color:#fff; }

/* Sticky header shadow once scrolled — toggled by JS class .is-stuck */
.ppm-header.is-stuck{ box-shadow:0 4px 16px rgba(0,0,0,0.08); }

/* Form fields inside the red contact-form card (Elementor: Form widget,
   field style = "Box", background white, no border) */
.ppm-form input,
.ppm-form textarea,
.ppm-form select{
  width:100%;
  background:#fff;
  border:none;
  border-radius:2px;
  padding:14px 16px;
  font-family: var(--ppm-font-body);
  font-size:14px;
  color: var(--ppm-navy);
}
.ppm-form input::placeholder,
.ppm-form textarea::placeholder{ color:#9aa0ab; }

/* FAQ accordion chevron rotate (Elementor: Accordion widget default icon
   swap already does this — kept here for the static HTML demo) */
.ppm-faq[open] summary .ppm-faq-icon{ transform:rotate(45deg); }
.ppm-faq summary{ list-style:none; cursor:pointer; }
.ppm-faq summary::-webkit-details-marker{ display:none; }
.ppm-faq-icon{ transition:transform .2s ease; }

/* Basic prose styling for the_content() output on blog posts, archives and
   generic pages (page.php / single.php) — the Tailwind CDN build does not
   include the @tailwindcss/typography plugin, so post/page body copy needs
   a small set of manual rules here. */
.ppm-page-content h1,
.ppm-page-content h2,
.ppm-page-content h3,
.ppm-page-content h4{
  font-family: var(--ppm-font-heading);
  color: var(--ppm-navy);
  font-weight:700;
  margin-top:1.5em;
  margin-bottom:0.6em;
  line-height:1.3;
}
.ppm-page-content h2{ font-size:1.6em; }
.ppm-page-content h3{ font-size:1.3em; }
.ppm-page-content p{ margin-bottom:1em; }
.ppm-page-content a{ color: var(--ppm-red); text-decoration: underline; }
.ppm-page-content a:hover{ color: var(--ppm-red-dark); }
.ppm-page-content ul,
.ppm-page-content ol{ margin: 0 0 1em 1.4em; }
.ppm-page-content ul{ list-style: disc; }
.ppm-page-content ol{ list-style: decimal; }
.ppm-page-content img{ max-width:100%; height:auto; border-radius:4px; margin:1em 0; }
.ppm-page-content blockquote{
  border-left:3px solid var(--ppm-red);
  padding-left:1em;
  margin:1.5em 0;
  color: var(--ppm-navy);
  font-style:italic;
}
.ppm-page-content table{ width:100%; border-collapse:collapse; margin-bottom:1em; }
.ppm-page-content table th,
.ppm-page-content table td{ border:1px solid #e2e5ea; padding:8px 12px; text-align:left; }

/* Utility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}