/**
 * STQC audit remediation — responsive layout and contrast fixes.
 *
 * Loaded after responsive.css / style.css / aptel.css so it can override the
 * older rules that cause the reported defects. Each block is labelled with the
 * audit finding it addresses.
 *
 * Several originals use `!important` or `position: absolute` with hardcoded
 * pixel offsets, so the counter-rules here must also use `!important` to win.
 */

/* ===========================================================================
   FINDING 1 — Header search box not visible on mobile.
   responsive.css hid the search column outright at <=768px:
       .mid-nav.pt-2.pb-2.bg-mid-nav .col-md-4.col-4 { display: none; }
   The column now carries col-12 and drops to its own row (see header.html.twig),
   so it can be shown again.
   =========================================================================== */

@media (max-width: 768px) {
  .mid-nav.pt-2.pb-2.bg-mid-nav .srch-blk,
  .mid-nav.pt-2.pb-2.bg-mid-nav .col-md-4.col-4 {
    display: block !important;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 6px 12px 2px;
  }

  .mid-nav.pt-2.pb-2.bg-mid-nav .srch-blk .header-search {
    margin-top: 0 !important;
  }
}

/* ===========================================================================
   FINDINGS 3 & 4 — National emblem / G20 / Swachh Bharat logos overlap.
   style.css positioned .g20 and .sb absolutely with fixed right offsets
   (right: -55px, right: 90px, etc.) at several breakpoints. Fixed offsets
   cannot adapt to viewport width, so the logos collide on phones and on
   iPad portrait. Returning them to normal flow lets flexbox space them.
   =========================================================================== */

@media (max-width: 1024px) {
  .g20,
  .sb {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
  }

  .mid-nav.pt-2.pb-2.bg-mid-nav .row {
    align-items: center;
    row-gap: 6px;
  }

  /* Cap sub-logo width so three of them plus the wordmark fit one row. */
  .g20 img,
  .sb img,
  .header-as img,
  .view-header-sub-logos .external img {
    width: auto !important;
    max-width: 100% !important;
    height: 42px !important;
    max-height: 42px !important;
    margin-top: 0 !important;
    object-fit: contain;
  }

  .header-as,
  .sb-img {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

@media (max-width: 480px) {
  .g20 img,
  .sb img,
  .header-as img,
  .view-header-sub-logos .external img {
    height: 34px !important;
    max-height: 34px !important;
  }
}

/* ---------------------------------------------------------------------------
   FINDINGS 1/3/4 (mobile) — clean three-row header stack on phones.
   Screenshot testing at 375px showed the wide site-logo (#logo) overflowing
   the viewport because it had no max-width; that pushed the three sub-logos
   onto separate lines and forced the whole page to scroll sideways.
   Below 768px we lay the header out as three predictable rows:
       row 1: site logo   row 2: emblem · G20 · Swachh   row 3: search
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Kill the sideways scroll the overflowing logo used to cause. */
  html,
  body {
    overflow-x: hidden;
  }

  .mid-nav.pt-2.pb-2.bg-mid-nav .row {
    flex-wrap: wrap !important;
    align-items: center;
    row-gap: 8px;
  }

  /* Row 1 — site logo takes the full width and never overflows it. */
  .mid-nav.pt-2.pb-2.bg-mid-nav .row > .col-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center;
  }

  .logo img,
  #logo {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Row 2 — the three sub-logo columns (all col-auto) sit together in one
     centred row. responsive.css:1003 forces `.row>* { width:100% }` in the
     481-768 band, which stacks them vertically; an explicit width beats
     flex-basis, so the width must be overridden here (not just flex). */
  .mid-nav.pt-2.pb-2.bg-mid-nav .row > .col-auto {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Row 3 — search on its own full-width line (order-last keeps it below). */
  .mid-nav.pt-2.pb-2.bg-mid-nav .row > .srch-blk {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   FINDING 4b — Search lens icon misplaced.
   responsive.css pushed the submit button outside its wrapper with
   `right: -40px !important`, which detaches it from the input on tablet.
   Anchor it inside the field instead.
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .search-input-wrapper,
  form#search-block-form {
    position: relative !important;
  }

  form#search-block-form input[type="search"] {
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 44px !important;
    box-sizing: border-box;
  }

  .search-block-form .btn-search,
  form#search-block-form .btn-search {
    right: 6px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    margin: 0 !important;
  }
}

/* ===========================================================================
   FINDING 2 — Pager numbers overlap next/last buttons on small screens.
   .pager__items rendered inline with `nav.pager { float: right }` and no
   wrapping, so items collided once they exceeded the row width.
   =========================================================================== */

@media (max-width: 768px) {
  nav.pager {
    float: none !important;
    width: 100%;
  }

  .pager .pager__items,
  .pager__items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center;
    gap: 6px;
    text-align: center !important;
    padding: 16px 0 !important;
    margin: 0;
    list-style: none;
  }

  .pager .pager__items li {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: inline-flex;
  }

  .pager .pager__items li a {
    display: inline-block;
    margin: 0 !important;
    /* 44px minimum touch target (WCAG 2.5.5). */
    min-width: 44px;
    min-height: 44px;
    line-height: 38px;
    padding: 2px 8px !important;
    text-align: center;
    white-space: nowrap;
  }
}

/* ===========================================================================
   FINDING 5 — "Search by Text" and date filter overlap on tablet/mobile.
   style.css pinned exposed-filter items to fixed percentages
   (40% / 25% / 18%) with no small-screen reset.
   =========================================================================== */

@media (max-width: 992px) {
  .views-exposed-form.two-element .form--inline .form-item,
  .views-exposed-form.three-element .form--inline .form-item,
  .views-exposed-form.four-element .form--inline .form-item,
  .views-exposed-form .form--inline .form-item {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
    box-sizing: border-box;
  }

  .views-exposed-form .form--inline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .views-exposed-form .view-filters input,
  .views-exposed-form .view-filters select,
  .views-exposed-form .form-item input,
  .views-exposed-form .form-item select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .views-exposed-form .form-actions {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ===========================================================================
   FINDING 6 — Home page quick-links / navigation cards misaligned on mobile.
   aptel.css used float-based cards at a fixed 22% width with 10px margins
   plus a 74px vertical margin on the list, so they never formed even rows.
   Replaced with a wrapping flex grid.
   =========================================================================== */

ul.quick-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin: 24px auto !important;
  padding: 0;
  list-style: none;
  width: 100%;
}

.quick-links-list li {
  float: none !important;
  /* Four per row on desktop, accounting for the 12px gap. */
  width: calc(25% - 12px) !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .quick-links-list li {
    width: calc(33.333% - 12px) !important;
  }
}

@media (max-width: 768px) {
  ul.quick-links-list {
    margin: 16px auto !important;
  }

  .quick-links-list li {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 400px) {
  .quick-links-list li {
    width: 100% !important;
  }
}

/* ===========================================================================
   FINDING 7 — "Welcome to APTEL" content overflows the card.
   style.css set a fixed `height: 410px` on .about-block, so any content
   taller than that spilled outside the rounded/shadowed boundary.
   =========================================================================== */

.about-block {
  height: auto !important;
  min-height: 410px;
  overflow: hidden;
  /* Long unbroken strings (URLs, case numbers) must not punch out the side. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
}

.about-block > * {
  max-width: 100%;
}

.about-block img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .about-block {
    min-height: 0;
  }
}

/* ===========================================================================
   FINDING 8 — Photo gallery "View All" hidden behind the carousel images.
   aptel.css positioned the link absolutely at `left: 88%; top: 10px`, which
   drops it on top of the slider in landscape / narrow viewports.
   Put the heading and link in a flex row instead.
   =========================================================================== */

.photo-gallery-wrapper {
  position: relative;
}

a.photo-galler-link {
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: right;
  margin: 10px 4px 0 0;
  /* Keep it above the carousel if any legacy rule re-stacks it. */
  z-index: 5;
}

h2.photo-gallery-title {
  display: inline-block;
  max-width: calc(100% - 90px);
  margin-right: 8px;
}

/* Clear the float so the carousel starts below the heading row. */
.photo-gallery-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* ===========================================================================
   FINDING 9 — Colour contrast.
   --orange (#f59d02) fails WCAG AA on white at 2.16:1, both as link text
   (.orange-text) and as a button background with white text (.btn-warning).
   Darkened to #8a5600, which gives 5.9:1 on white while staying in the same
   hue family. The remaining links named in the audit (View All / Read More /
   etc.) already measure 7:1-10:1 against their real backgrounds — see the
   handover note; those need the tester's measured values to action.
   =========================================================================== */

:root {
  --orange-accessible: #8a5600;
}

ul.menu-items li.orange-text a,
.orange-text {
  color: var(--orange-accessible) !important;
}

.search-panel .btn.btn-warning {
  background: var(--orange-accessible) !important;
  color: #ffffff !important;
}

/* Links must stay distinguishable without relying on colour alone (WCAG 1.4.1). */
.news_feed .view-updates,
a.news-updates,
a.photo-galler-link,
.about-block a {
  text-decoration: underline !important;
}