/* ============================================================
   THDC — Reflow / Responsive fixes (WCAG 1.4.10 / GIGW)
   Purpose: eliminate horizontal-scroll/overlap failures at 200%
   and 400% browser zoom (effective viewport ~640px / ~320px).

   HOW TO USE
   Add this as its OWN css file, loaded AFTER thdc.theme's main
   stylesheet in your *.libraries.yml, e.g.:

     thdc/global-styling:
       css:
         theme:
           css/style.css: {}
           css/reflow-fixes.css: {}   <-- add this line, keep it last

   Loading it last means it wins ties against the existing
   !important rules without you having to delete/rewrite them.
   ============================================================ */

/* NOTE: the html/body overflow-x:hidden "safety net" that used to be
   here was removed — it was disturbing float containment in the
   footer (many un-cleared float:left elements there) and causing a
   blank gap above the scroll-to-top button. If a genuine horizontal
   scroll shows up on a specific page, fix that page's actual
   overflowing element instead of hiding it at the body level. */

/* 2. Header search box
   Real fix: the flex container has to be the <form id="search-block-form">
   itself — its two children (.form-item holding the input, and
   .form-actions holding the submit button) are what need to sit
   side by side. The outer .search-block-form div only wraps the
   form and has no second child, so flexing it did nothing before. */
.resp-height {
  position: relative !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.resp-height #search-block-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}
.resp-height #search-block-form .form-item {
  flex: 1 1 auto !important;
  min-width: 0 !important;   /* lets the input shrink instead of forcing the row to overflow/wrap */
  margin: 0 !important;
}
.resp-height #search-block-form .form-item input.form-autocomplete {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: 34px !important;
  box-sizing: border-box !important;
}
.resp-height #search-block-form .form-actions {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* 3. Major Projects icons (Hydro/Solar/Thermal/Wind) — fixed px width
   overflows a narrow/zoomed column */
.hydro, .solor, .thermal, .wind {
  width: 100% !important;
  max-width: 240px;
  margin: 0 auto;
}
.icon-hydro img, .icon-solor img, .icon-thermal img, .icon-wind img {
  width: 100%;
  height: auto;
  max-width: 230px;
}

/* 4. Large fixed-size images/floats elsewhere in content pages */
.shape img {
  width: 100%;
  height: auto;
  max-width: 800px;
}
.shape .dcn-d,
img.dcn-p {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  max-width: 460px;
}
.cf-img {
  width: 100%;
  height: auto;
}

/* 5. "About us" samgra panel — icon column has no stacking fallback */
@media (max-width: 480px) {
  .samgraPic { float: none; width: 100%; text-align: center; }
  .samgraCont { margin-left: 0; }
}

/* 6. .left / .right list rows (e.g. profile / report listings) —
   combined fixed width (352px) already exceeds a 320px reflow target */
@media (max-width: 400px) {
  .left  { float: none; width: 100%; margin-bottom: 10px; }
  .right { width: 100%; }
}

/* 7. Scheme box grid — fixed 258px tile, no breakpoint existed */
@media (max-width: 600px) {
  ul.schm_box2 li { width: 100% !important; margin-right: 0; }
}

/* 8. Nav mega-menu dropdown submenus (TBM module) — can overflow a
   zoomed/narrow viewport since one is % of parent and one is a
   fixed 280px panel */
@media (max-width: 480px) {
  .tbm-item-child {
    width: 100% !important;
    position: static !important;
  }
  .invester-corner-left .tbm-item-child .custom-dropdown .tbm-item-child {
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
  }
}

/* 9. Small fixed-position badge that can overlap header content at
   high zoom */
@media (max-width: 480px) {
  .dashboard_tab {
    width: 90px;
    height: 40px;
    font-size: 11px;
    padding-top: 8px;
  }
}

/* 11. Important News badge ("महत्वपूर्ण समाचार") overlapping the
   marquee text. Root cause: .imp-_nes_nvs is position:absolute with
   top/left/right/bottom:0, but its own parent (.imp-nvs_news) was
   never given position:relative — so the browser skips past it and
   anchors the badge to #impp_news instead (the FULL row), which is
   why right:0 stretches it across the marquee column instead of
   staying inside its own narrow column. Only visible ~768-991px
   effective width; below 767px an existing rule already disables
   the absolute positioning entirely. */
.imp-nvs_news {
  position: relative !important;
}

/* 11b. NEW news ticker (replaces the old .imp_newshome / <marquee>
   block if you've switched to the news-ticker-twig-snippet.twig
   markup). Pure flexbox, no absolute positioning, no negative
   margins, no fixed widths — so it can't develop the "gap that only
   shows at some widths" problem the old version had. */
.news-ticker {
  background-color: #b7910b;
  overflow: hidden;
}
.news-ticker__inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px;
  padding: 6px 0;
}
.news-ticker__label {
  flex: 0 0 auto;
  background: #6b0f1a;
  padding: 10px 20px;
}
.news-ticker__label h3 {
  margin: 0;
  color: #ff0;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.news-ticker__track-wrap {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0; /* lets this shrink instead of forcing the row to overflow */
}
.news-ticker__track {
  display: inline-block;
  white-space: nowrap;
  animation: news-ticker-scroll 60s linear infinite;
}
.news-ticker__track:hover,
.news-ticker__track:focus-within,
.news-ticker__track.is-paused {
  animation-play-state: paused;
}
@keyframes news-ticker-scroll {
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}
.news-ticker__content div {
  display: contents; /* removes the Drupal view's wrapper divs from the
                         box layout entirely, so they can't force a new
                         line — only their content (the <p>) remains */
}
.news-ticker__content p.home-news {
  display: inline !important;
  margin: 0 60px 0 0 !important;
  padding: 0 !important;
}
.news-ticker__content a {
  color: #fff;
  text-decoration: none;
  margin-right: 60px;
}
.news-ticker__controls {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.news-ticker__btn {
  background: rgba(0,0,0,0.25);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-ticker__btn:hover { background: rgba(0,0,0,0.45); }

@media (prefers-reduced-motion: reduce) {
  .news-ticker__track { animation: none; }
}

@media (max-width: 767px) {
  .news-ticker__inner { flex-wrap: wrap; }
  .news-ticker__label,
  .news-ticker__track-wrap { width: 100%; }
}

/* 10. Home page slider (Views Slideshow / Cycle module)
   This module measures the container's pixel width ONCE on page
   load and writes it straight into an inline style on the wrapper
   AND on every slide (e.g. style="width:1351px;height:496px").
   It never recalculates that number on zoom, so the slider stays a
   fixed size while everything around it shrinks — this is what
   causes both the white gap next to the slider image and the
   Important-News bar overlapping it (that bar has a negative
   margin-top designed to sit flush against a *full-width* slider).
   CSS !important beats a plain (non-important) inline style, so we
   can force these back to fluid sizing without touching any JS. */
#views_slideshow_cycle_teaser_section_home_page_slider-block_1 {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1905 / 496 !important; /* matches the source images' native ratio */
}
.views_slideshow_cycle_slide {
  width: 100% !important;
  height: 100% !important;
}
.views_slideshow_cycle_slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}