/*----------------------------------------------------------------
  BBC Industrial Services — Header & Footer Responsive Corrections
  ----------------------------------------------------------------
  Loaded LAST (after main.css, theme.css, bbc-features.css).

  Scope
  -----
  Header (.rs-header-four, both the static and the #rs-sticky-header
  instance, plus the offcanvas panel) and the footer block
  (.rs-footer-bg-thumb-wrapper / .rs-footer-two / .rs-copyright-one).

  Rules
  -----
  • Purely corrective — no colour, font-family, font-weight, icon,
    radius, shadow, gradient or content change.
  • Desktop (>= 1200px) rendering is deliberately left untouched
    except where a genuine defect existed (documented inline).
  • Uses the theme's own breakpoints (575 / 767 / 991 / 1199) and
    Bootstrap's grid so nothing new is introduced.
  • No `overflow-x: hidden` band-aids — every overflow is fixed at
    the element that caused it.
-----------------------------------------------------------------*/

/*==================================================================
  1. HEADER — navigation breakpoint alignment
  ------------------------------------------------------------------
  DEFECT: meanmenu is initialised with meanScreenWidth: 1199 and
  main.css hides #mobile-menu-two below 1200px, but

    (a) the .rs-header-menu chip (white pill + padding) was only
        hidden below 768px, so from 768–1199px it rendered as an
        empty 40px-wide pill in the middle of the header, and
    (b) the hamburger carried Bootstrap's `d-md-none`, i.e. it was
        hidden from 768px up — leaving NO way at all to open the
        navigation between 768px and 1199px.

  FIX: hide the (now empty) menu chip across the same range that
  meanmenu owns. The hamburger is re-enabled in the markup by
  swapping `d-md-none` -> `d-xl-none` (Bootstrap xl = 1200px), which
  lines the toggle up exactly with meanScreenWidth: 1199.
==================================================================*/
@media only screen and (max-width: 1199px) {
  .rs-header-four .rs-header-menu {
    display: none;
  }
}

/*==================================================================
  2. HEADER — make the top row structurally un-overflowable
  ------------------------------------------------------------------
  DEFECT: .rs-header-inner is a nowrap flex row whose children had
  no shrink budget, so below ~390px the hamburger was pushed past
  the viewport (document scrollWidth 396px at a 320–390px viewport —
  the menu button was literally off-screen and unreachable), and the
  sticky header overflowed again at 576–600px when the "Get In
  Touch" CTA re-appears.

  FIX: give the row a hard 100% ceiling and let the logo block —
  the only element with slack — absorb the difference. Every child
  gets `min-width: 0` so a long word or a translated label can never
  force the row wider than the screen.
==================================================================*/
.rs-header-four .rs-header-inner {
  max-width: 100%;
  flex-wrap: nowrap;
}

.rs-header-four .rs-header-left {
  flex: 0 1 auto;
  min-width: 0;
}

.rs-header-four .rs-header-menu,
.rs-header-four .rs-header-right,
.bbc-header-toggle-slot {
  flex: 0 0 auto;
  min-width: 0;
}

/* Logo stays proportional (500x150 source) and never stretches,
   blurs or crops — it simply scales inside whatever room is left.
   NOTE: `display` is deliberately NOT touched here, because
   theme.css uses it to swap .bbc-logo-light / .bbc-logo-dark. */
.rs-header-four .rs-header-logo,
.rs-header-four .rs-header-logo > a {
  max-width: 100%;
  min-width: 0;
}

.rs-header-four .rs-header-logo > a {
  line-height: 0;
}

.rs-header-four .rs-header-logo img {
  width: 100%;
  max-width: 180px;
  height: auto;
  vertical-align: middle;
}

/*==================================================================
  3. HEADER — 576px to 1199px (large phone / tablet / small laptop)
  ------------------------------------------------------------------
  The CTA button returns at 576px and the hamburger now also lives
  in this range, so the right-hand cluster is trimmed just enough to
  stay inside the viewport. Font size, colour and radius unchanged —
  only horizontal padding and the flex gap are reduced.
==================================================================*/
@media only screen and (max-width: 1199px) {
  .rs-header-four .rs-header-right {
    gap: 15px;
  }

  /* With the inline nav gone, the row holds three blocks
     (logo / language+theme / hamburger). `space-between` alone would
     strand the language+theme pill in the middle of an empty header,
     so the two control blocks are kept together on the trailing edge
     — the same "logo left, controls right" reading the >= 1200px
     layout already has. */
  .rs-header-four .rs-header-inner > .bbc-header-toggle-slot {
    margin-inline-start: auto;
  }
}

@media only screen and (max-width: 767px) {
  .rs-header-four .rs-header-right {
    gap: 12px;
    padding-inline: 15px;
  }

  .rs-header-four .rs-header-btn .rs-btn {
    padding: 13px 18px;
  }
}

/*==================================================================
  4. HEADER — 320px to 575px (small phones)
  ------------------------------------------------------------------
  main.css already turns the logo plate transparent here; switching
  its fixed `width: 100%` to `auto` is visually identical (the plate
  has no background at this size) but restores the flex shrink that
  was blocking the row from fitting.
==================================================================*/
@media only screen and (max-width: 575px) {
  .rs-header-four .rs-header-inner {
    gap: 8px;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }

  .rs-header-four .rs-header-logo-wrapper {
    width: auto;
    max-width: 100%;
  }

  .rs-header-four .rs-header-right {
    gap: 12px;
    padding-inline: 0;
  }

  .bbc-header-toggle-slot {
    padding: 7px 10px;
  }
}

/* Up to 430px the .container-fluid gutter (15px a side) is already
   enough edge spacing, so the row's own inner padding is released
   back to the logo instead of being spent twice.
   430px is chosen deliberately: from 431px up the logo already
   reaches its 180px ceiling with the looser metrics, so there is no
   step in logo size across the boundary. */
@media only screen and (max-width: 430px) {
  .rs-header-four .rs-header-inner {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .bbc-header-toggle-slot {
    padding: 6px 8px;
  }

  .bbc-header-toggle-slot .bbc-lang {
    margin-inline-end: 6px;
  }

  .bbc-lang-btn {
    padding: 0 9px;
    gap: 5px;
  }

  .rs-header-four .rs-header-right {
    gap: 10px;
  }
}

/*==================================================================
  5. HEADER — top contact bar
  ------------------------------------------------------------------
  The e-mail address is a single unbreakable token; on a 320px
  screen it has to be allowed to wrap rather than widen the bar.
==================================================================*/
.rs-header-top .rs-header-contact-item {
  min-width: 0;
}

.rs-header-top .rs-header-contact-item h6,
.rs-header-top .rs-header-contact-item h6 a {
  overflow-wrap: anywhere;
}

.rs-header-top .rs-header-info-item svg,
.rs-header-top .rs-header-contact-item i {
  flex-shrink: 0;
}

/*==================================================================
  6. HEADER — dropdown menus must stay inside the viewport
  ------------------------------------------------------------------
  The 260px submenu currently fits at every width >= 1200px, but the
  right-most item is only ~90px from the edge at 1200px. Flipping
  the last dropdown to right-alignment removes any chance of it
  hanging off-screen after a content or translation change, without
  altering where the panel sits today for the other items.
==================================================================*/
@media only screen and (min-width: 1200px) {
  .rs-header-four .main-menu .submenu,
  .rs-header-four .main-menu .mega-menu {
    max-width: calc(100vw - 30px);
  }
}

/*==================================================================
  7. HEADER — offcanvas (mobile) panel
  ------------------------------------------------------------------
  On a 320px screen the logo, theme toggle, language pill and close
  button sat edge-to-edge with no breathing room. Scaling the logo
  down slightly is the only change needed; nothing is hidden.
==================================================================*/
.offcanvas-top {
  flex-wrap: nowrap;
}

.offcanvas-logo {
  min-width: 0;
}

.offcanvas-logo a img {
  width: 180px;
  max-width: 100%;
  height: auto;
}

.offcanvas-top .bbc-theme-toggle,
.offcanvas-top .bbc-lang,
.offcanvas-close {
  flex-shrink: 0;
}

@media only screen and (max-width: 430px) {
  .offcanvas-top {
    gap: 8px;
  }

  .offcanvas-logo a img {
    width: 120px;
  }

  .offcanvas-top .bbc-theme-toggle,
  .offcanvas-top .bbc-lang {
    margin-inline-end: 0;
  }
}

/* Comfortable touch targets in the mobile menu (visual size of the
   link is unchanged — only the tap area is guaranteed). */
.offcanvas-area .mean-container .mean-nav ul li a {
  min-height: 44px;
}

/*==================================================================
  8. FOOTER — grid behaviour
  ------------------------------------------------------------------
  DEFECT: the four widgets used col-md-3, so from 768px to 991px
  each column was only ~190px wide. "Useful Links" split into two
  sub-columns of one word each and the addresses broke to 1–2 words
  per line. The markup now uses col-md-6 (2 x 2) for that range;
  col-lg-3 and up are untouched, so the desktop footer is identical.

  The rules below only guarantee the columns can actually shrink.
==================================================================*/
.rs-footer-two .rs-footer-top .row > [class*="col-"] {
  min-width: 0;
}

.rs-footer-widget,
.rs-footer-widget-content {
  min-width: 0;
}

/*==================================================================
  9. FOOTER — long e-mail / address strings
  ------------------------------------------------------------------
  DEFECT: "balurambrosco@rediffmail.com" is a single unbreakable
  token ~221px wide. Inside a flex row with a 42px icon it could not
  shrink, so it pushed the whole document wider than the viewport at
  576px and again from 768px to 1100px (document scrollWidth up to
  1118px on a 1100px viewport).

  FIX at the source: allow the text column of the flex row to shrink
  (`min-width: 0`) and allow the token itself to wrap.
==================================================================*/
.footer-address-item,
.footer-contact-item {
  min-width: 0;
}

.footer-address-content,
.footer-contact-content {
  flex: 1 1 auto;
  min-width: 0;
}

.footer-address-content a,
.footer-address-title,
.footer-contact-content a,
.footer-contact-content h6 {
  display: block;
  overflow-wrap: anywhere;
}

.footer-address-icon,
.footer-contact-icon {
  flex-shrink: 0;
}

/*==================================================================
  10. FOOTER — logo
  ------------------------------------------------------------------
  DEFECT: .rs-subscribe-logo img had no width ceiling, so it was
  sized purely by its column and swung from 162px wide at 768px to
  the full 500px source width at 2560px+ — far larger than the
  header logo and than the theme's own footer logo rule
  (.rs-footer-two .rs-footer-widget-logo img { max-width: 180px }).

  FIX: adopt that same 180px ceiling so the mark is stable and
  proportional from 320px to 4K.
  --> If a larger mark is preferred, change ONLY the value below.
==================================================================*/
.rs-footer-two .rs-subscribe-logo img {
  width: 100%;
  max-width: 180px;
  height: auto;
}

/*==================================================================
  11. FOOTER — newsletter card
  ------------------------------------------------------------------
  The card keeps its existing .container width, offset (top: 200px /
  margin-bottom: 180px) and 480px form. These rules are pure safety
  valves: they let the text block and the input shrink so the card
  can never widen the page, and stop the 65px icon from being
  squashed. Nothing changes at any width where the card already fits.
==================================================================*/
.newsletter-wrapper {
  max-width: 100%;
}

.newsletter-left {
  min-width: 0;
}

.newsletter-icon {
  flex-shrink: 0;
}

.newsletter-form {
  max-width: 100%;
}

.newsletter-form input {
  min-width: 0;
}

/*==================================================================
  12. FOOTER — "Ask AI" card
==================================================================*/
.footer-ai-card {
  min-width: 0;
}

.footer-ai-icon {
  flex-shrink: 0;
}

/*==================================================================
  13. FOOTER — copyright bar
  ------------------------------------------------------------------
  Below 992px the two halves stack. The markup now carries
  `text-center text-lg-start` / `text-center text-lg-end` so the
  stacked lines are centred instead of one flush-left and one
  flush-right; >= 992px is unchanged. Separator spacing is also
  reduced on phones via `mx-2 mx-sm-4`.
==================================================================*/
.rs-copyright-one .rs-footer-copyright p {
  overflow-wrap: anywhere;
}

@media only screen and (max-width: 991px) {
  .rs-copyright-one .rs-footer-copyright p {
    margin-bottom: 8px;
  }

  .rs-copyright-one .row > div:last-child .rs-footer-copyright p {
    margin-bottom: 0;
  }
}

/*==================================================================
  14. WIDE SCREENS (>= 1920px)
  ------------------------------------------------------------------
  The header and footer already use container-fluid, so they simply
  span the viewport at 2K/4K. Nothing is stretched — the only guard
  needed is that the raster logos are not upscaled beyond their
  native resolution, which sections 2 and 10 already enforce.
==================================================================*/



@media (min-width:3001px) and (max-width:6000px) {
  .rs-header-four .rs-header-logo img {
        width: 100%;
        max-width: 220px;
    }
}