/* Home page and header fixes from the 15 Nov bug sheets (logo, language icon, chakra, slider buttons).
   Matched to the old website (ipindia-old.adgstaging.in) at 1440 px: header logo 480 x 72, centre badge 116 x 92,
   chakra wheel 450 x 450, language icon 32 x 32 inside a 44 x 34 button, Prev / Next 35 x 35. */

/* ---- Header logos ---------------------------------------------------------------------------------- */
/* Main logo: the picture fills the 480 x 72 logo box (kept in proportion, left aligned) like the old site, instead of
   showing at its own (smaller) pixel size when the uploaded file is small. */
.vs-header.header-layout2 .header-logo .main-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}
/* Centre badge: 92 px high like the old site (it was 85 px, which cut the "बौद्धिक सम्पदा भारत" caption under the emblem). */
@media (min-width: 992px) {
    .vs-header.header-layout2 .headerip_logoArea { height: 92px; }
    .vs-header.header-layout2 .headerip_logoArea img { height: 92px; object-fit: contain; object-position: center; }
}

/* ---- Language icon (the plugin's own अ / A icon, as on the old site) ------------------------------------ */
/* the button box is 44 x 34 and the top bar 47 px high, as on the old site (the inline button left a 6 px line gap: 40 px) */
.top-info-list .bhashini-plugin-container { display: flex; align-items: center; }
.bhashini-lazy-btn .bhashini-dropdown-btn-icon { display: inline-flex; width: 32px; height: 32px; }
.bhashini-lazy-btn .bhashini-dropdown-btn-icon svg { width: 32px; height: 32px; display: block; }

/* ---- Chakra wheel: bigger (450 px at 1440 px wide like the old site); colours are not touched ------------- */
.content.logoAnimationArea { --chakra-d: min(31.25vw, 500px); }
/* a petal click starts the expand animation: the patch under the wheel (a plain box in the banner's colour) must not stay
   behind as a white box while the petals fade out (class set by the script at the end of index.blade.php) */
.chakra-clicked .chakra-patch { opacity: 0 !important; visibility: hidden; transition: opacity .12s linear; }
.bannerLogoArea .menu__item { -webkit-tap-highlight-color: transparent; }
.bannerLogoArea .menu__item:focus:not(:focus-visible) { outline: 0 !important; box-shadow: none !important; }

/* ---- Slider / ticker buttons: one line, like the old site ---------------------------------------------- */
.slider-controls { gap: 10px; }
.slider-controls--events .slider-ctl,
.slider-controls--news .slider-ctl,
.slider-controls--tenders .slider-ctl { width: 35px; height: 35px; }
@media (min-width: 992px) {
    /* Events: Pause sits right beside Previous / Next (those are owl-nav buttons, 35 px high, 10 px apart) and on the same line
       as "View More" and as the News buttons */
    .slider-controls--events { margin-right: 90px; }
    .areoSlider .eventsSliderArea .owl-nav { bottom: -79px; }
}
/* Service cards: Pause is centred under the cards, 34 x 34 like the old site (it was above the cards, at the right) */
.slider-controls--services { top: auto; bottom: -25px; right: auto; left: 50%; transform: translateX(-50%); }
.slider-controls--services .slider-ctl { width: 34px; height: 34px; }
@media (max-width: 991.98px) {
    .slider-controls--services { top: auto; right: auto; }
}

/* ---- Button labels stay on one line -------------------------------------------------------------------- */
a.news-apply-btn, .showBannerBtn, .btn-02-none, .slider-ctl, .filterClearBtn { white-space: nowrap; }

/* ---- Skip to main content on the home page ------------------------------------------------------------------- */
/* <main> starts at the very top of the home page (the header floats over it), so moving focus to it changed nothing the
   visitor could see. Give it a visible inside ring while it holds focus, so the skip is noticeable; the next Tab press
   goes to the first control of the page content. */
main#main-content:has(> .bannerSection):focus-visible { outline: 6px solid #f47920 !important; outline-offset: -6px !important; }

/* Bottom menu bar between 992 and 1180 px: tighter side padding so "International Cooperation" is never clipped and the
   page never scrolls sideways, whatever width the web font ends up with. */
@media (min-width: 992px) and (max-width: 1180px) {
    .mainMenuSection .main-menu > ul > li > a {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 12.5px;
    }
    .mainMenuSection .main-menu {
        max-width: 100%;
    }
}

/* ---- Events and News controls: both groups sit together in the middle between the two sections, and each group reads
   Previous, Pause, Next (News: Up, Pause, Down). Below 992 px the sections stack and each group is centred. ---------- */
.eventsSliderArea .owl-nav.has-pause {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
}
.eventsSliderArea .owl-nav.has-pause button { margin: 0; }
.eventsSliderArea .owl-nav.has-pause .slider-controls--events { margin: 0; }
@media (min-width: 992px) {
    .eventsSliderArea .owl-nav.has-pause { left: auto; right: -12px; }   /* ends just left of the section edge */
    .slider-controls--news { margin-left: 8px; }                         /* starts just right of it */
}
@media (max-width: 991.98px) {
    .eventsSliderArea .owl-nav.has-pause { left: 50%; right: auto; transform: translateX(-50%); }
    .slider-controls--news { margin-left: auto; margin-right: auto; }
}
@media (min-width: 992px) {
    .slider-controls--news { position: relative; top: 1px; }   /* same line as the Events buttons (they sit 1 px lower) */
}

/* ---- Final placement (client mark-up of 16 Nov): each control group is centred in its own section and "View More" is on the
   right under both sections. ----------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .eventsSliderArea .owl-nav.has-pause { left: 50%; right: auto; transform: translateX(-50%); }
}
/* News: the same on tablets (the sections are one under the other there), down to small phones' width */
@media (min-width: 576px) {
    div:has(> .slider-controls--news) { position: relative; min-height: 35px; }
    .slider-controls--news { position: absolute; left: 50%; top: 1px; transform: translateX(-50%); margin: 0; }
    .slider-controls--news + .btn-02-none { margin-left: auto; }
}

@media (max-width: 575.98px) {
    .slider-controls--news + .btn-02-none { margin-left: auto; margin-right: auto; }
}