/*----------------------------------------------------------------
  BBC Industrial Services — Page/Section Responsive Corrections
  ----------------------------------------------------------------
  Companion to bbc-responsive.css (which covers header + footer).
  Loaded LAST, after main.css / theme.css / bbc-features.css /
  bbc-responsive.css.

  Scope
  -----
  Body sections only: hero, section watermarks, cards, forms,
  legacy/story blocks and the policy pages.

  Rules followed
  --------------
  • Corrective only. No colour, font-family, font-weight, icon,
    radius, shadow, gradient, content or section-order change.
  • Every rule below fixes a defect that was measured in a browser
    at a specific width, and each one names that defect.
  • No `body { overflow-x: hidden }`, no `* { max-width: 100% }`.
  • Theme breakpoints reused throughout (480/575/767/991/1199/1600).
-----------------------------------------------------------------*/

/*==================================================================
  1. HOME — hero headline collision
  ------------------------------------------------------------------
  DEFECT (measured 320, 430, 992, 1920, 2560, 3840):
  the outlined line ("Catalyst Handling", rotated by JS) was drawn
  on top of the solid orange line ("Engineered Solutions for") and,
  at >=1601px, on top of the subtitle as well.

  Two independent root causes:

  (a) `.heading-1 { font-size: 80px !important }` was added to the
      SOLID line only. Above 1600px the outlined line keeps the
      theme's 150px, so the two lines are wildly different sizes
      while `margin-top: -160px` still assumes they match.

  (b) The theme pulls the outlined line up with hard-coded negative
      margins (-160 / -95 / -73 / -52 / -118px) that were tuned for
      a ONE-LINE solid headline. BBC's headline wraps to two lines
      below 1200px, so the pull lands the outlined text on the
      second line instead of below it.

  FIX: keep the layout the theme itself produces between 1200px and
  1600px — where it renders exactly as designed (solid line, then
  the outlined line directly beneath) — and apply that same
  relationship at every other width.
==================================================================*/
@media only screen and (min-width: 1601px) {

  /* match the solid line so the pair reads as one headline again */
  .rs-banner-seven .rs-banner-title.has-stroke {
    font-size: 80px;
    margin-top: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .rs-banner-seven .rs-banner-title.has-stroke {
    margin-top: 0;
  }
}

/* The theme's own scale runs 90 -> 70 -> 50px as the screen narrows,
   then jumps UP to 55px below 480px. That inversion is what broke
   "Engineered" across two lines on a 320px screen. A fluid value
   over the phone range removes the inversion and the mid-word break
   without touching any width where the fixed sizes already work. */
@media only screen and (max-width: 767px) {

  .rs-banner-seven .rs-banner-title,
  .rs-banner-seven .rs-banner-title.has-stroke,
  .rs-banner-seven .rs-banner-title.heading-1 {
    /* `!important` is required here only because the solid line carries
       `.heading-1 { font-size: 80px !important }`. Higher specificity
       plus !important is the only way to reach it without editing that
       existing rule. This is the single !important in this file. */
    font-size: clamp(30px, 9.4vw, 50px) !important;
  }
}

/* the headline block must never widen the page */
.rs-banner-seven .rs-banner-title-wrpper,
.rs-banner-seven .rs-banner-title {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* The rotating service word animates in with `translateY(30px)`
   (`.text-animate` / @keyframes serviceAnimation). On desktop there is
   room for that travel; on phones the headline sits flush against the
   description, so for ~0.6s out of every 2.5s the sliding word crossed
   the first line of the paragraph. Reserving the travel distance keeps
   the animation exactly as authored and stops the collision. */
@media only screen and (max-width: 767px) {
  .rs-banner-seven .hero-desc {
    padding-top: 44px;
  }
}

/*==================================================================
  2. SITE-WIDE — giant section watermarks below 992px
  ------------------------------------------------------------------
  DEFECT (measured on our-story.php at 320/375/430):
  the "OUR STORY" watermark was drawn straight through the opening
  paragraph, making the line "Established in 1970 as Baluram &..."
  unreadable.

  ROOT CAUSE: main.css hides every watermark below 992px
  (`.rs-about-six .rs-about-title { display: none }` @max-991), but
  a later rule — `.story-narrative .watermark-title { display: block }`
  — re-enables it for that one section at ALL widths.

  FIX: restore the site-wide behaviour for that section. The
  watermark still shows from 992px up, exactly as on every other
  page. Nothing changes at desktop.
==================================================================*/
@media only screen and (max-width: 991px) {
  .story-narrative .watermark-title {
    display: none;
  }
}

/* From 992px up the watermark is a centred flex line. In a narrow
   column ("Core" in a col-lg-4, "INFRASTRUCTURE" in a container-fluid)
   it spilled past its parent and was sliced in half by the section's
   clipping. Capping the width lets it wrap instead of being cut.
   Deliberately NOT `overflow: hidden` — with `line-height: 0.8` that
   would crop the glyphs vertically. Verified: 0px spill on every
   watermark across index/about/our-story at 992/1200/1440/1920. */
@media only screen and (min-width: 992px) {
  .rs-about-six .rs-about-title.watermark-title {
    max-width: 100%;
  }
}

/*==================================================================
  3. SERVICE PAGES — transient horizontal scrollbar at <=430px
  ------------------------------------------------------------------
  DEFECT (measured on all 7 service pages at 320/375/430):
  document scrollWidth reached 323-352px on a 320px viewport.

  ROOT CAUSE: the quote form carries wow.js `fadeInRight`, whose
  keyframes start the element at `translate3d(100%, 0, 0)` — i.e.
  one full element-width to the right of its final position. While
  that 1s entrance plays, the form genuinely sticks out past the
  right edge of the page.

  FIX: clip at the section that owns the animation. `overflow: clip`
  (not `hidden`) is used deliberately — it does not create a scroll
  container, so it cannot break `position: sticky` descendants, and
  it is contained to this one section rather than the whole body.
  The entrance animation still plays exactly as before.
==================================================================*/
.rs-services-area.rs-services-six,
.rs-contact-area {
  overflow-x: clip;
}

/*==================================================================
  4. CONTACT — e-mail clipped inside the "Email Us" card
  ------------------------------------------------------------------
  DEFECT (measured at 992 and 1200): the card is `overflow: hidden`
  and "balurambrosco@rediffmail.com" is one unbreakable 221px token,
  so it rendered as "balurambrosco@rediffmail.co" with the rest cut.
==================================================================*/
.contact-card {
  min-width: 0;
}

.contact-card a,
.contact-card p,
.contact-card h4,
.contact-card h5 {
  overflow-wrap: anywhere;
  min-width: 0;
}

/*==================================================================
  5. POLICY PAGES — contact list at 320px
  ------------------------------------------------------------------
  DEFECT: the e-mail address in the contact block on
  privacy-policy.php and terms-of-service.php was cut by 7px.
==================================================================*/
.privacy-wrapper .contact-list li,
.privacy-wrapper .contact-list li a,
.privacy-wrapper p a {
  overflow-wrap: anywhere;
  min-width: 0;
}

/*==================================================================
  6. OUR STORY — legacy & safety box
  ------------------------------------------------------------------
  DEFECT (measured 320-430): `.bis-ls-box` keeps a fixed
  `padding: 45px 50px`. On a 375px screen that spends 100px of the
  available 375 on padding alone, squeezing the heading until it was
  clipped by the box's own `overflow: hidden`.

  FIX: scale the padding down on phones only. Desktop padding,
  radius, background and the decorative ring are untouched.
==================================================================*/
@media only screen and (max-width: 575px) {
  .bis-ls-box {
    padding: 30px 22px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .bis-ls-box {
    padding: 38px 32px;
  }
}

.bis-ls-box,
.bis-ls-head,
.bis-ls-head h3 {
  min-width: 0;
  overflow-wrap: break-word;
}

/*==================================================================
  7. FORMS — select control on the quote forms
  ------------------------------------------------------------------
  `.nice-select .current` is `white-space: nowrap`; a long option
  label ("Catalyst Handling", "Equipment Installation") could push
  the control wider than its column on a 320px screen. Truncating
  with an ellipsis keeps the control inside the form while leaving
  the native dropdown list fully readable.
==================================================================*/
.rs-contact-input .nice-select {
  max-width: 100%;
}

.rs-contact-input .nice-select .current {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:bold;
}

.rs-contact-form input,
.rs-contact-form textarea,
.rs-contact-form select {
  max-width: 100%;
  min-width: 0;
}

/*==================================================================
  8. TOUCH TARGETS
  ------------------------------------------------------------------
  The hamburger's <a> wrapped a bare 21x20 SVG. The icon is left at
  exactly its current size — only the tappable area is grown, and
  the negative margin keeps the surrounding layout identical.
==================================================================*/
@media only screen and (max-width: 1199px) {
  .rs-header-hamburger .sidebar-toggle .bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 21x20 icon -> 37x44 hit area. The inline padding is kept at 8px
       grows leftward and vertically only -- never past the icon's own
       trailing edge, because the hamburger is the last element in the
       header row on a 320px screen. The matching negative margin means
       the row's geometry is byte-for-byte what it was before. */
    padding: 12px 0 12px 16px;
    margin: -12px 0 -12px -16px;
  }
}

/*==================================================================
  9. LARGE SCREENS (>=1920px)
  ------------------------------------------------------------------
  The theme already caps `.container` at 1390px, so body content
  stays centred and line lengths stay readable at 2K/4K. The only
  guard needed is that raster art is not upscaled past its native
  resolution and pseudo-element decoration cannot widen the page.
==================================================================*/
@media only screen and (min-width: 1920px) {

  .rs-about-thumb img,
  .rs-services-thumb img,
  .rs-breadcrumb-area img {
    max-width: 100%;
    height: auto;
  }
}

@media (min-width:0px) and (max-width:475px) {
  .rs-header-hamburger .sidebar-toggle .bar-icon {
    padding: 9px 0 12px 16px;
    margin: 0px 0 -12px -16px;
  }

  .rs-banner-seven .rs-banner-title,
  .rs-banner-seven .rs-banner-title.has-stroke,
  .rs-banner-seven .rs-banner-title.heading-1 {
    /* `!important` is required here only because the solid line carries
       `.heading-1 { font-size: 80px !important }`. Higher specificity
       plus !important is the only way to reach it without editing that
       existing rule. This is the single !important in this file. */
    font-size: clamp(28px, 9.4vw, 28px) !important;
  }

  .rs-banner-seven .rs-banner-title.heading-1 {
    padding-bottom: 10px;
  }

  .rs-banner-seven .hero-desc {
    padding-top: 24px;
  }
}