/*
 * GIGW 3.0 / WCAG 2.1 AA fixes that override the theme stylesheets.
 */

/* Hidden but available to screen readers (page heading on the home page). */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Home › News & Events tabs: white on #438cdf was 3.3:1; brand blue gives 7:1. */
.nav-tabs .nav-link.active.col,
.nav-link.active.col {
    background-color: #034ea2 !important;
    color: #fff !important;
}

/* Sitemap intro sits on the blue card header: grey text was 2.9:1. */
.card-header.bg-primary .lead.text-muted {
    color: #fff !important;
    opacity: .92;
}

/* Breadcrumb text on photo banners: keep it readable whatever the image. */
.breadcumb-wrapper .breadcumb-title,
.breadcumb-wrapper .breadcumb-menu li,
.breadcumb-wrapper .breadcumb-menu li a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

/* Footer ownership statement. */
.footer-bottom .footer-ownership {
    font-size: 13px;
    margin-bottom: 6px;
}

/* External links get a small marker (added by the layout script). */
a .ext-link-arrow {
    font-size: .8em;
    margin-left: .25em;
}

/* Keyboard focus rings: see focus.css. */

/* Links inside text must not rely on colour alone (WCAG 1.4.1). Only real links: an <a> without
   href (a disabled mailto: link, see MailtoLinks) is text. */
.main-content p a:where([href]):not(.btn),
.main-content td a:where([href]):not(.btn),
.an-application-jurisdiction li a:where([href]):not(.btn),
.aboutSectionArea p a:where([href]):not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Sitemap card header: Bootstrap blue gave 4:1 for the 20px intro; brand blue gives 7:1. */
.card > .card-header.bg-primary {
    background-color: #034ea2 !important;
}

/* Home news list: the highlighted date was white on light blue (1.6:1). */
#newsList .date.active,
.marqueeArea .date.active {
    color: #034ea2 !important;
}

/* Header accessibility-options control is a <button> now (it opens a panel); keep the icon look. */
.top-info-list .a11y-tools-toggle {
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

/* Section heading inside inner pages became an h2 where the banner already has the h1. */
.main-content .aboutSectionArea .innerpage-heading-title h2 {
    margin: 0;
    padding: 0;
    color: #00509f !important;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

/* First-Tab skip link (layout): visible only while focused, above everything. */
.gigw-skip-link:focus,
.gigw-skip-link:focus-within {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 100000;
    background: #ffffff;
    color: #034ea2;
    font-weight: 600;
    padding: 10px 16px;
    border: 2px solid #034ea2;
    border-radius: 4px;
}

/* An open main-menu dropdown goes above the home news ticker (z-index 9999 in style.css),
   which otherwise covered the last items of long flyouts on laptop-height windows. */
.mainMenuSection:hover,
.mainMenuSection:focus-within {
    z-index: 10000;
}

/* Mobile menu: a parent item that is also a page gets its own toggle beside the link
   (custom.js); same look as the "+" that used to sit inside the link. */
.vs-mobile-menu ul .vs-has-toggle-btn {
    position: relative;
}
.vs-mobile-menu ul .vs-has-toggle-btn > a {
    padding-right: 34px;
}
.vs-mobile-menu ul .vs-has-toggle-btn > .vs-mean-expand-btn {
    position: absolute;
    right: 0;
    top: 6px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    background-color: var(--smoke-color);
    color: #063a41;
    box-shadow: 0 0 20px -8px rgba(242, 0, 58, 0.5);
}
.vs-mobile-menu ul .vs-has-toggle-btn > .vs-mean-expand-btn:before {
    content: "\f067";
    font-family: 'Font Awesome 6 Pro';
}
.vs-mobile-menu ul .vs-has-toggle-btn.vs-active > .vs-mean-expand-btn:before {
    content: "\f068";
}

/* Format and size added to document links (DescribeDocumentLinks middleware). */
.doc-meta {
    font-size: 0.85em;
    font-weight: 400;
    white-space: nowrap;
}

/* style.css forces DM Sans on every <span> (!important), which also hit icon spans such as the
   search buttons' <span class="fa fa-search">, so the glyph rendered as an empty box. */
span.fa, span.fas, span.fa-solid {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
}

/* Hidden notes are position:absolute (Bootstrap). Left at their in-flow position inside a wide
   table they escaped the table's own horizontal scroll and widened the whole page on phones
   (Tenders 733 px at a 320 px viewport). Pin them to their containing block. */
.visually-hidden:not(:focus):not(:focus-within) {
    top: 0 !important;
    left: 0 !important;
}
.table-responsive {
    position: relative;
}

/* Side buttons on tablets and zoomed-in screens (501-991 px): one "Quick links" button opens them
   as a list instead of a column of circles covering the page (GIGW / WCAG 1.4.4, 1.4.10). */
.side-links-toggle {
    display: none;
}
@media (min-width: 501px) and (max-width: 991.98px) {
    .side-links-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        left: 10px;
        bottom: 14px;
        z-index: 10002;
        padding: 10px 16px;
        border: 0;
        border-radius: 24px;
        background: #034ea2;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .side-links:not(.is-open) {
        display: none;
    }
    .side-links.is-open {
        position: fixed;
        left: 10px;
        bottom: 66px;
        z-index: 10002;
        width: min(320px, calc(100vw - 20px));
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        padding: 6px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    }
    .side-links.is-open ul.leftSideBtn,
    .side-links.is-open ul.rightSideBtn {
        position: static;
        transform: none;
        margin: 0;
        padding: 0;
    }
    .side-links.is-open ul li {
        width: 100% !important;
        height: auto;
        margin: 4px 0;
        padding: 6px 10px;
        border-radius: 8px;
        background: #f1f4fb !important;
        transform: none !important;
        justify-content: flex-start;
    }
    .side-links.is-open ul li a {
        width: 100%;
        gap: 10px;
        color: #0b2a5b !important;
        justify-content: flex-start !important;
    }
    .side-links.is-open ul.leftSideBtn li a {
        flex-direction: row-reverse; /* icon first, like the right-hand list */
        justify-content: flex-end !important;
    }
    .side-links.is-open ul li i {
        margin: 0 !important;
        transform: none !important;
    }
}

/* Side-menu header became an h2 (one level below the page's h1): same look as the old h3. */
.lft-side .sidebar-header h2 {
    margin: 0 0 13px 0;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #263a7f;
    border-radius: 6px;
    border: 1px solid #d7e5f4;
}

/* Quick links panel: left-aligned text in both lists. */
@media (min-width: 501px) and (max-width: 991.98px) {
    .side-links.is-open ul li,
    .side-links.is-open ul li a {
        text-align: left;
    }
}

/* Contact page helpline line: a paragraph now (it is not a heading); same look as before. */
.main-content .aboutSectionArea .contactAreaPanel .contatInfoBox p.fw-bold {
    text-transform: none;
    margin: 0;
    padding: 0;
}

/* Patent agent page: columns that were <ul> holding headings and paragraphs (invalid) are divs,
   floated like the theme's ".inviduals-Startups-whatis ul" (which still styles the lists inside). */
.main-content .aboutSectionArea .inviduals-Startups-whatis .whatis-col {
    float: left;
    margin: 5px 46px 5px 0;
    list-style: none;
}

/* ---------------------------------------------------------------------------------------------
 * Headings renamed so that the page outline has no gaps (Nu validator, WCAG 1.3.1) keep the look
 * of their old level. style.css styles headings by tag (".aboutSectionArea h2" is blue with
 * padding, "h3" grey, ...) and gives the .h1-.h6 classes white text, so a renamed heading needs its
 * old rule repeated here. Each block names the old markup it copies.
 * --------------------------------------------------------------------------------------------- */

/* h2 class="h3" in page content: was h3 (list pages, FAQ cards) - copies ".aboutSectionArea h3". */
.main-content .aboutSectionArea h2.h3 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 20px;
    line-height: 25px;
    color: #323232;
    font-weight: 600;
    letter-spacing: normal;
}
/* News list pages: copies ".roster-group-abc h3". */
.main-content .aboutSectionArea .roster-group-abc h2.h3 {
    font-size: 21px;
    color: #034ea2;
    font-weight: 500;
    margin-bottom: 9px;
}
/* FAQ cards: copies ".service-card-items-2 h3" and its underline. */
.main-content .aboutSectionArea .service-card-items-2 h2 {
    text-align: left;
    font-size: 20px !important;
    padding: 0 !important;
    position: relative;
    margin-bottom: 40px !important;
}
.main-content .aboutSectionArea .service-card-items-2 h2:after {
    width: 50px;
    height: 4px;
    background: #034ea2;
    position: absolute;
    bottom: -20px;
    border-radius: 50px;
    left: 0;
    content: '';
}

/* RTI section titles (h2 class="h6"): were h6. */
.main-content .aboutSectionArea h2.h6 {
    padding: 0;
    line-height: 1.25;
}

/* Officer names on Who is who and Contact us (h3 class="h6"): were h6 - copies ".contatInfoBox h6". */
.aboutSectionArea .contactAreaPanel .contatInfoBox h3.h6 {
    text-transform: none;
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

/* Contact us helpline line (a paragraph now): was a white h6 on the blue box. */
.main-content .aboutSectionArea .contactAreaPanel .contatInfoBox.infoBoxTopArea p.fw-bold {
    font-size: 16px;
    color: #ffffff;
    font-weight: 600 !important; /* over .fw-bold */
    line-height: 1.25;
    text-align: inherit;
}

/* Feedback form note (a paragraph now): was an h6. */
.main-content .aboutSectionArea p.form-note {
    font-weight: 600 !important; /* over .fw-bold */
    line-height: 1.25;
    text-transform: uppercase;
    text-align: start;
}

/* E-Gateways link groups (h2): were h3 - copies ".rulesBoxArea h3". */
.main-content .aboutSectionArea .rulesBoxArea h2 {
    background: #263a7f;
    font-size: 18px;
    padding: 8px;
    color: #fff;
    margin-bottom: 15px;
    line-height: 25px;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
body.dark-contrast .main-content .aboutSectionArea .rulesBoxArea h2 {
    background: #000 !important;
}

/* Side-menu header (h2): was h3 - copies its dark-contrast rules. */
body.dark-contrast .lft-side .sidebar-header h2 {
    border: 1px solid #ff0;
    background: #000 !important;
}

/* Patent agent page columns (div): were ul; the dark-contrast theme paints every div black. */
body.dark-contrast .main-content .whatis-col {
    background: transparent !important;
}

/* Sitemap section titles and the information box title: Bootstrap colours, not the .h3/.h5 white. */
.card .card-title.h3,
.alert .alert-heading.h5 {
    color: inherit;
}

/* Footer section titles (h2): were h4, which style.css sets to 20px on screens up to 768px. */
@media only screen and (max-width: 768px) {
    .section-footer .footer-widget h2.footer-title {
        font-size: 20px !important;
    }
}

/* Footer dialog titles (h2 class="modal-title h5"): Bootstrap's modal title line height. */
.modal-header .modal-title.h5 {
    line-height: var(--bs-modal-title-line-height, 1.5);
}

/* Accessibility panel title (h2): was h5 - copies ".offcanvas-header h5". */
.accessibilityControlsArea .offcanvas-header h2 {
    color: #000;
}

/* CMS content that started at h3 or lower moved up (CmsContent::headingsFromH2 adds "cms-hN", N = the
   level in the content): same look as the old tag - copies ".aboutSectionArea h3 / h5 / h6".
   (A content h1 becomes an h2 inside .innerpage-heading-title: see the rule near the top.) */
.main-content .aboutSectionArea :is(h2, h3, h4, h5).cms-h3 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 20px;
    line-height: 25px;
    color: #323232;
    font-weight: 600;
    letter-spacing: normal;
}
.main-content .aboutSectionArea :is(h2, h3, h4, h5).cms-h5 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 18px;
    line-height: 1.25;
    color: #323232;
    font-weight: 600;
    letter-spacing: normal;
}
.main-content .aboutSectionArea :is(h2, h3, h4, h5).cms-h6 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    line-height: 1.25;
    color: #323232;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
}

/* Event and tender lists: the "View Page" button keeps its words together in the narrow last column
   (it wrapped one letter per line: bug sheet 08/10 #12). */
.main-content .aboutSectionArea tbody td .ip-btn { white-space: nowrap; }

/* Paragraphs entered in an admin module (e.g. Patents › Jurisdiction Content) keep the spacing of the page's
   own paragraphs: the wrapper adds it, so the text's last paragraph adds none. */
.main-content .cms-block > :last-child { margin-bottom: 0; }


/* Application workflow steps (GIGW 8.17): every step is written title -> number -> details, so screen readers and
   the keyboard meet them in that order. ipindia.gov.in mirrors the even steps on wide screens (details on the
   left, title on the right); that mirroring is done here with `order`, so the markup stays in reading order. */
.stepAreaStPanel .stepAreaBox:nth-child(2n) > div.pillArea { order: 3; }
.stepAreaStPanel .stepAreaBox:nth-child(2n) > div.node { order: 2; }
.stepAreaStPanel .stepAreaBox:nth-child(2n) > div.bullets { order: 1; }
@media only screen and (max-width: 800px) {
    /* One column on small screens, title first for every step, as on ipindia.gov.in. responsive.css reverses
       the even steps' children for the old markup; the reading-order markup needs no reversal. */
    .stepAreaStPanel .stepAreaBox:nth-child(2n) > div.pillArea { order: 1; }
    .stepAreaStPanel .stepAreaBox:nth-child(2n) > div.node { order: 2; }
    .stepAreaStPanel .stepAreaBox:nth-child(2n) > div.bullets { order: 3; }
}

/* Acts: a long section title wraps inside its own column (bug sheet BUG-199). */
.actsAccordionSection .section-row .section-left,
.actsAccordionSection .section-row .section-text { min-width: 0; overflow-wrap: anywhere; }

/* Footer social media icons (Website Structure › Footer): a saved SVG sits like the Font Awesome icons. */
.section-footer .social-menu svg {
    display: inline-block;
    vertical-align: -0.125em;
}

/* "Hide Chakra" is a real <button>: keep the old look of the former <div>. */
button.showBannerBtn {
    border: 0;
    font: inherit;
    line-height: inherit;
    text-align: left;
    margin: 0;
}

/* Footer social icons: at least 32 x 32 px hit area (WCAG 2.5.8) without a bigger glyph. */
.section-footer .social-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

/* Chakra wheel: pause the rotation while a petal has keyboard focus, as it does on hover. */
.bannerLogoArea:focus-within .anim-01,
.anim-01:focus-within {
    animation-play-state: paused;
}

/* Visitors who ask the system for less motion: no decorative infinite animations or long transitions. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-iteration-count: 1 !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    .anim-01 { animation: none !important; transform: none; }
    /* The news ticker stands still (scrollable by hand) instead of sliding. */
    .news-slider-track { animation: none !important; }
    .news-slider-wrapper { overflow-x: auto; }
}

/* Header logo: responsive.css pushed the picture 16% of its height below its own box between 501 and 1199 px
   (7-8 px at 1024 and 768). Keep the picture level with the .header-logo box. */
@media only screen and (min-width: 501px) and (max-width: 1199px) {
    .vs-header.header-layout2 .header-logo .main-logo { transform: none; }
}

/* Home News & Updates: the "Apply Now" button under an item. It sat inside the list's generic `li a` rules (flex, width
   100%, purple hover) with an inline width of 17%: at the width of the news box the label wrapped and was clipped, and
   on hover the text turned purple on blue. It is a normal button now: sized by its label, aligned with the item text,
   a readable hover/focus state, and a comfortable touch target. */
.choose-us-style-onea-area .whatNewAreaBox ul li a.news-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 2px 0 12px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #0d6efd;            /* the small blue button of the live site (Bootstrap primary) */
    border: 1px solid #0d6efd;
    border-radius: 4px;
}
.choose-us-style-onea-area .whatNewAreaBox ul li a.news-apply-btn:hover,
.choose-us-style-onea-area .whatNewAreaBox ul li a.news-apply-btn:focus-visible {
    color: #fff !important;
    background: #0b5ed7;
    border-color: #0a58ca;
    text-decoration: none;
}
.choose-us-style-onea-area .whatNewAreaBox ul li a.news-apply-btn:focus-visible {
    outline: 2px solid #f47920;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   GIGW bug 10 - keyboard focus must never land on something the user cannot see.
   The fixed side buttons sit mostly off-screen (only their round icon shows) and
   slide out on hover; slide them out on keyboard focus too, so the focused button
   and its focus ring are fully visible (desktop layout only: below 992px the
   buttons are a column or a "Quick links" list, see responsive.css above).
   Off-screen carousel / ticker items are taken out of the Tab order by gigw-a11y.js.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* further than on hover (130px) so the whole label and the focus ring are inside the window */
    ul.leftSideBtn li:has(a:focus-visible) {
        transform: translatex(255px);
    }
    ul.rightSideBtn li:has(a:focus-visible) {
        transform: translatex(-255px);
    }
}
/* the slid-out button is wider than the icon: keep the ring on the visible part of the pill */
.leftSideBtn li a:focus-visible,
.rightSideBtn li a:focus-visible {
    outline-offset: -3px !important;
}
/* The skip target is focused by script only (tabindex="-1"); a ring round the whole
   page content would be noise. */
#main-content:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Items the script marked off-screen (inert) must not be reachable by pointer either. */
[data-gigw-offscreen] {
    pointer-events: none;
}

/* ---- Menus, document links and wide tables (client screenshots, 15 Nov) ---- */

/* 1. "(PDF, 123 KB)" and "Published on ..." appended to a link are for screen readers and document lists. Inside the
   menus (top flyouts, left menu, mobile menu) they overlapped the page name, so they stay as hidden text there. */
.sub-menu .doc-meta,
.sub-menu .doc-date,
.lft-side .submenu .doc-meta,
.lft-side .submenu .doc-date,
.vs-mobile-menu .doc-meta,
.vs-mobile-menu .doc-date,
.main-menu .doc-meta,
.main-menu .doc-date {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 2. Left menu: its links are flex boxes, so the external-link arrow (and any added note) became a separate item at the far
   right and overlapped the text. Plain flow keeps the arrow right after the name. */
.lft-side .submenu > .menu-item > .menu-link,
.lft-side .submenu > a {
    display: block;
}
.lft-side .submenu a .ext-link-arrow {
    display: inline;
    float: none;
    margin-left: .3em;
}

/* 3. Download links in tables: the cells are justified, which spread "View" and "(74.93 KB)" across the cell. */
.pdf-link,
.main-content td a.pdf-link,
.main-content table .with-info {
    text-align: left;
}

/* 4. A flex row with a wide table inside (PCT-ISA/IPEA fee table) widened the whole card, cutting the text on the right.
   The column may shrink, and the table scrolls inside it. */
.main-content .aboutSectionArea .pct-system-pctpage .adv-row > div:last-child {
    min-width: 0;
    flex: 1 1 0%;
    max-width: 100%;
}