/* Shell fixes: footer, left side menu and /contact-us colours, brought back to how ipindia.gov.in (the final design)
   draws them, while the accessibility fixes (labels, contrast, hidden "opens in a new window" text) stay.
   Measured against the live site with computed styles; see the comments for what each rule matches. */

/* ---------------------------------------------------------------------------------------------
   Footer (bug sheet: "Compare the footer section with the live website")
   --------------------------------------------------------------------------------------------- */

/* Live leaves the typeface of the footer box and the chat-bot link to the browser (its stylesheet has a typo,
   "!important !important", so the body font never applies): the loose text there ("Last Updated On:", the
   counters) is drawn in the system font. Headings, links and paragraphs have their own DM Sans rule on both. */
.section-footer,
.chat-bot {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Government logos: on live each sits on a white rounded plate (padding 5px 15px, radius 5px) and is 25px high.
   Staging had dropped the plate and drawn them 35px high. */
.section-footer .govtImgArea a,
.section-footer .govtImgArea > img {
    display: inline-block;
    background: #fff;
    padding: 5px 15px;
    border-radius: 5px;
}
.section-footer .govtImgArea a img,
.section-footer .govtImgArea > img {
    height: 25px;
    width: auto;
}
.section-footer .govtImgArea > img {
    box-sizing: content-box;
}

/* Social icons: the 32 x 32 px hit area (WCAG 2.5.8) stays, but the glyphs sit as close together as on live
   (20px between glyphs) and the row is as high as on live (one 18px line), so the footer is not taller. */
.section-footer .social-menu {
    gap: 4px;
    align-items: center;
    height: 27.9px;
}
.section-footer .social-menu li {
    display: flex;
    line-height: 1;
}

/* The small arrow that the layout script appends to external links is not on live's footer; the link keeps its
   "(external website, opens in a new window)" text for screen readers. */
.section-footer .ext-link-arrow {
    display: none;
}

/* ---------------------------------------------------------------------------------------------
   Left side menu (bug sheet: "Compare the left-side menu section with the live website")
   --------------------------------------------------------------------------------------------- */

/* Live leaves 10px under the last item inside the box. */
.lft-side {
    padding-bottom: 10px;
}

/* The page you are on, when it is itself an expandable entry inside a submenu (it has pages below it).
   Live shows the current page inside a submenu as plain blue text with a blue dot (a.active-link) - no bar.
   Staging drew a blue bar with a white ring, as it does for a top-level section. Same look as live's active link;
   hover and keyboard focus keep the dark bar. */
.lft-side .submenu .menu-item > .menu-link.has-submenu.is-current:not(:hover):not(:focus-visible) {
    background: transparent;
    color: #0254a0 !important;
    font-size: 16px;
    border-left: 0;
    border-radius: 0;
}
.lft-side .submenu .menu-item > .menu-link.has-submenu.is-current:not(:hover):not(:focus-visible)::after {
    display: none;
}
.lft-side .submenu .menu-item > .menu-link.has-submenu.is-current::before {
    background: #0254a0 !important;
}
.lft-side .submenu .menu-item > .menu-link.has-submenu.is-current:not(:hover):not(:focus-visible) .arrow {
    color: #0254a0;
}

/* ---------------------------------------------------------------------------------------------
   /contact-us text colours (bug sheet: "text color")
   --------------------------------------------------------------------------------------------- */

/* "Open House Portal for Submitting Grievances Online": on live the link is white on the navy button
   (class btn-success matches ".ext_linkks.btn.btn-success.text-white"). Staging's link carries btn-15, so the page rule
   ".main-content .aboutSectionArea a" made the text black (1.99:1) and the grey paragraph rule made
   "(Preferred Mode of Communication)" 1.22:1 on the navy button. Both are white again (10.5:1), as on live. */
.main-content .aboutSectionArea .contactAreaPanel .openhouse a.ext_linkks.btn,
.main-content .aboutSectionArea .contactAreaPanel .openhouse a.ext_linkks.btn:hover,
.main-content .aboutSectionArea .contactAreaPanel .openhouse a.ext_linkks.btn:focus,
.main-content .aboutSectionArea .contactAreaPanel .openhouse a.ext_linkks.btn p {
    color: #fff;
}

/* Dark contrast mode: the current page in a submenu is yellow on black, like the other highlights there. */
body.dark-contrast .lft-side .submenu .menu-item > .menu-link.has-submenu.is-current:not(:hover):not(:focus-visible),
body.dark-contrast .lft-side .submenu .menu-item > .menu-link.has-submenu.is-current:not(:hover):not(:focus-visible) .arrow {
    color: #ff0 !important;
}
body.dark-contrast .lft-side .submenu .menu-item > .menu-link.has-submenu.is-current::before {
    background: #ff0 !important;
}

/* Between 992 and 1199 px the desktop menu is still shown but style.css hid the search toggle (max-width:1199px), so
   there was no visible way to search (audit follow-up). Keep it visible while the desktop menu is. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-icons .searchBoxTggler { display: inline-block; }
}