/*
 ================================================================
  Printronics India — Fix v6
  1. Remove white gap between header and video
  2. Fix oversized black icon/value boxes
 ================================================================
  INSTALL: Appearance → Customize → Additional CSS
  REMOVE or REPLACE any previous version that added padding-top to #page
 ================================================================
*/


/* ════════════════════════════════════════════════════════════
   FIX 1: REMOVE WHITE GAP BETWEEN HEADER & VIDEO
   
   The header on this theme is OVERLAY style (transparent, 
   sits on top of content). Content starts at top:0.
   Previous fix wrongly added padding-top to #page.
   Remove it completely.
   ════════════════════════════════════════════════════════════ */

/* Remove any padding we added before */
#page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.admin-bar #page {
  padding-top: 0 !important;
}

/* The site-content wrapper — no extra top spacing */
#content.site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The header-wrapper — keep it in normal flow, no gap below */
.header-wrapper {
  margin-bottom: 0 !important;
}

/* The first vc_row (hero video row) — flush to top */
.vc_row.vc_custom_1776923651927 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* hero-wrap — flush, no gap */
.hero-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* WPBakery sometimes adds top margin on first row */
.wpb-content-wrapper > .vc_row:first-child {
  margin-top: 0 !important;
}


/* ════════════════════════════════════════════════════════════
   VIDEO — full width on mobile/tablet, no black bars
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1024px) {

  .hero-wrap {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  /* Kill the calc(100vh - 80px) height — this caused the black void */
  .vc_row.vc_row-o-full-height,
  .vc_row.vc_custom_1776923651927 {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Remove the black overlay div on the hero row */
  .vc_custom_1776923651927 > .tm-vc-row-overlay {
    display: none !important;
  }

  .video-container {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .video-container video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  .audio-btn {
    bottom: 12px !important;
    right: 12px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   FIX 2: BLACK ICON/VALUE BOXES — too tall, too much space
   
   Root cause: vc_row-o-equal-height makes all 3 columns 
   equal the tallest one. The hidden .hide-text description
   is still in the DOM taking layout space even if invisible.
   Also vc_row-o-content-middle vertically centers, creating
   padding above and below the icon.
   ════════════════════════════════════════════════════════════ */

/* The two values rows */
.vc_custom_1775914161377,
.vc_custom_1775914166981 {
  /* Remove equal height stretching on mobile */
}

@media screen and (max-width: 1024px) {

  /* Each value column — remove equal height */
  .vc_custom_1775914161377 .wpb_column,
  .vc_custom_1775914166981 .wpb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    /* Remove height stretching */
    align-self: auto !important;
    height: auto !important;
  }

  /* The inner icon-box row — remove equal height + flex middle */
  .heli-icon-box2.vc_row-o-equal-height,
  .heli-icon-box2.vc_row-o-content-middle,
  .heli-icon-box2.vc_row-flex {
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* The column inside each icon box */
  .heli-icon-box2 .vc_column_container,
  .heli-icon-box2 .vc_column-inner {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* The icon — reduce size on mobile */
  .heli-icon-box2 .vc_icon_element-icon {
    font-size: 56px !important;
    line-height: 1 !important;
  }

  .heli-icon-box2 .vc_icon_element {
    margin-bottom: 12px !important;
  }

  /* HIDE the description text (.hide-text) completely 
     It's invisible but still takes space in layout */
  .heli-icon-box2 .hide-text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Value heading (ENSURE SAFETY, FOCUS ON CUSTOMERS etc.) */
  .heli-icon-box2 .vc_custom_heading:not(.hide-text) {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
  }

  /* Each black background box — compact it */
  .heli-icon-box2.vc_row-has-fill {
    padding: 0 !important;
  }
}

@media screen and (max-width: 768px) {

  /* Extra compact on phone */
  .heli-icon-box2 .vc_column-inner {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .heli-icon-box2 .vc_icon_element-icon {
    font-size: 48px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TEXT SECTION — fix justify + letter-spacing
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

  .heli-typed-words {
    text-align: left !important;
    hyphens: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    padding: 20px !important;
    margin: 20px 12px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Welcome heading letter-spacing fix */
  .vc_row .vc_custom_heading[style*="letter-spacing: 1em"] {
    letter-spacing: 0.05em !important;
  }
}


/* ════════════════════════════════════════════════════════════
   GLOBAL SAFETY
   ════════════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}


/*
 ================================================================
  Printronics — Video Fix ONLY (Mobile & Tablet)
  
  Problem: .video-container is width:90% and video uses
  object-fit:contain — both set in WPCode snippet.
  This causes narrow video with black bars on sides.
  
  INSTALL: Appearance → Customize → Additional CSS → ADD this
  (keep your existing CSS, just ADD this below it)
 ================================================================
*/

@media screen and (max-width: 1024px) {

  /* 1. Force container to full width — overrides width:90% */
  .video-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* 2. Switch object-fit: contain → cover — removes black bars */
  .video-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* KEY: contain → cover */
    display: block !important;
  }

  /* 3. Hero wrap — full width, no flex centering */
  .hero-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: unset !important;
    align-items: unset !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  /* 4. Remove the vc_row full-height that adds black void */
  .vc_row.vc_row-o-full-height,
  .vc_custom_1776923651927 {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 5. Remove black overlay on hero row */
  .vc_custom_1776923651927 > .tm-vc-row-overlay {
    display: none !important;
  }
}