/*
 * Home page and header fixes from the GIGW bug sheet (bugs 2, 3, 4, 15).
 * Loaded after gigw-fixes.css (layouts/FrontEnd/app.blade.php).
 */

/* ------------------------------------------------------------------ *
 * Bug 2: the header's logos and top links never overlap.
 * The centred badge (.headerip_logoArea) is absolutely placed over the middle of the header; the top
 * links (<nav> beside the logo column) start to its right (style.css, header-overflow.js). These rules
 * make sure that holds when a link is long, when JavaScript is off and when the badge picture is large.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  /* the badge stays a clipped box; the picture inside can never grow it over the links */
  .vs-header.header-layout2 .headerip_logoArea { max-width: 136px; box-sizing: border-box; z-index: 1; }
  /* a long link wraps inside its own space instead of running under the badge */
  .vs-header.header-layout2.has-header-badge .header-menu-col { min-width: 0; }
  .vs-header.header-layout2.has-header-badge .main-menu > ul > li > a { overflow-wrap: anywhere; }
}
/* the logo itself never grows past its column (no overlap with the links or the badge) */
.vs-header.header-layout2 .header-logo-col .main-logo img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ *
 * Bug 3: NEWS & UPDATES ticker. Heading and Play / Pause buttons sit side by side inside the heading
 * box (they were absolutely positioned over the heading text and each other), at every width.
 * ------------------------------------------------------------------ */
.upComungNews .newsBoxArea > .d-flex { align-items: stretch; }
.upComungNews .newsAreaHd {
  width: auto;
  flex: 0 0 auto;
  height: auto;
  min-height: 44px;
  padding: 8px 14px 8px 18px;
  gap: 10px;
  overflow: visible;
}
.upComungNews .newsAreaHd .newsAreaTitle { display: inline-block; white-space: nowrap; line-height: 1.2; }
.upComungNews .newsBoxArea button.btnPs {
  position: static;
  right: auto;
  top: auto;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #162e6a;
  color: #fff;
  cursor: pointer;
}
.upComungNews .newsBoxArea button.btnPs[hidden] { display: none !important; }
.upComungNews .newsBoxArea button.btnPs:hover { background: #0b1d4d; }
.upComungNews .newsBoxArea button.btnPs svg { width: 12px; height: 12px; fill: #fff; opacity: 1; margin: 0; }
.upComungNews .newsBoxAreaSd { min-width: 0; }
@media (max-width: 575.98px) {
  /* narrow screens: heading with its buttons on one line, the moving news on a line of its own */
  .upComungNews .newsBoxArea > .d-flex { flex-wrap: wrap; }
  .upComungNews .newsAreaHd { flex: 1 1 100%; min-height: 40px; padding: 6px 14px; }
  .upComungNews .newsBoxAreaSd { flex: 1 1 100%; padding-top: 4px; padding-bottom: 4px; }
}

/* ------------------------------------------------------------------ *
 * Bug 4: Pause / Play, Previous and Next buttons of Key Offerings (Events, Tenders/ Notices, News &
 * Updates) and of the service cards.
 * ------------------------------------------------------------------ */
.slider-controls { display: inline-flex; align-items: center; gap: 8px; }
.slider-controls[hidden] { display: none !important; }
.slider-ctl {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: #034ea2;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.slider-ctl:hover { background: #0b3a7a; }
.slider-ctl:focus-visible { outline: 3px solid #f47920; outline-offset: 2px; box-shadow: 0 0 0 2px #1a1a1a; }
.slider-ctl i { pointer-events: none; }

/* Events: left of the Previous / Next arrows (those sit at the right end of this row) */
.slider-controls--events { margin-left: auto; margin-right: 100px; }
/* Tenders/ Notices: at the right end of the row */
.slider-controls--tenders { margin-left: auto; }
/* News & Updates: Previous, Pause, Next at the left of the row, "View More" stays at the right */
.slider-controls--news { margin-right: auto; }
/* Service cards: next to the arrows above the cards (the position of the old, hidden Stop button) */
.slider-controls--services { position: absolute; top: -38px; right: 100px; z-index: 2; }
@media (max-width: 991.98px) {
  .slider-controls--services { top: -38px; right: 0; }
}
@media (max-width: 575.98px) {
  .slider-controls--events { margin-right: auto; margin-left: 0; }
}

body.dark-contrast .upComungNews .newsBoxArea button.btnPs,
body.dark-contrast .slider-ctl { background: #000; color: #ff0; border: 1px solid #ff0; }
body.dark-contrast .upComungNews .newsBoxArea button.btnPs svg { fill: #ff0; }

/* (Visitors who prefer reduced motion: slider-controls.js starts everything paused; Play still works.) */

/* ------------------------------------------------------------------ *
 * Bug 15: the label with the back arrow on a Chakra petal page ("Designs") was grey (#757575) on the
 * red / coloured panel. White on a dark translucent plate reads on every petal colour (>= 7:1).
 * ------------------------------------------------------------------ */
.content__subtitle {
  display: inline-block;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  padding: 0.2em 0.65em;
  border-radius: 6px;
  text-shadow: none;
}
.content__subtitle .char,
.content__subtitle span { color: inherit; }