/* Accessibility fixes — WCAG 2.2 AA audit remediation (header/footer + home + mutual-funds
   + transactions/document-library scope). */

/* Generic sr-only utility (present for screen readers, invisible on screen) — same
   pattern as .mo-doc-lib-visually-hidden-label below, kept separate so unrelated fixes
   don't share a class whose name is specific to the doc-library plugin. */
.a11y-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* SharePoint/OneDrive document-library plugin (Public Issue, Right Issue, Debt Offer,
   Takeovers, Buyback, Delisting — all embed the same shortcode; audit rows 19-21 on
   these pages). Both bugs are confirmed straight from the plugin's own unobfuscated
   includes/css/doclib.css, not guessed: */
/* .mo_doc_lib_breadcrumb_item:hover sets color:#fff against its own #BDBDBD hover
   background — 1.8:1. */
.mo_doc_lib_breadcrumb_item:hover {
	color: #161616 !important;
}
/* .mo_doc_lib_table-header ("Name"/"Download" column labels) never sets its own text
   color, so it inherits the theme's body color #464646 against this plugin's own
   #95A5A6 header background — 3.69:1. */
.mo_doc_lib_responsive-table .mo_doc_lib_table-header {
	color: #161616;
}

/* Search Documents input label (accessibility-fixes.js labelDocLibSearchBox).
   Visible (verification R1: explicitly wants an on-screen <label> here, same as
   the two CF7 forms above) - class name is legacy from when this was sr-only,
   left as-is to avoid touching the JS that references it for a rename that
   doesn't change behaviour. */
.mo-doc-lib-visually-hidden-label {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	margin: 0 0 4px 0;
}

/* Transactions-page section tabs (Public Issues/Rights Issues/...), wrapped in a real
   <ul>/<li> by accessibility-fixes.js fixUbtnDualRole (audit row 12, Public Issue) —
   reset list defaults so it keeps the exact inline-button-row look these buttons
   already had as bare <div class="ubtn-ctn-inline"> siblings. */
ul.a11y-ubtn-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.a11y-ubtn-list > li {
	display: inline-block;
}

/* Nav "current section" highlight (e.g. "Our Activities" when on Mutual Funds — a page
   under it — audit row 23, 1.4.3): #FF5E14 on white is 3.05:1. Redux outputs this
   dynamically per theme option, so it's an inline <style> block, not a stylesheet file —
   !important is required to win over it. #B34500 keeps the same orange (5.58:1 on white,
   same value re-used for the "Clients/Crores/Years" stat-label fix on Mutual Funds).
   The same Redux rule also sets this #FF5E14 on plain `li:hover > a` (any nav item on
   mouseover/keyboard-focus, current page or not) - a manual CCA re-check on "About Us"
   caught this exact gap: the selector list below had only ever covered the three
   current-* states, never plain :hover, so hovering a non-current item was still
   2.9:1. */
.wraper_header.style-nine .nav > [class*="menu-"] > ul.menu > li.current-menu-item > a,
.wraper_header.style-nine .nav > [class*="menu-"] > ul.menu > li.current-menu-parent > a,
.wraper_header.style-nine .nav > [class*="menu-"] > ul.menu > li.current-menu-ancestor > a,
.wraper_header.style-nine .nav > [class*="menu-"] > ul.menu > li:hover > a {
	color: #b34500 !important;
}

/* Breadcrumb <ul><li> rebuild (accessibility-fixes.js fixBreadcrumb, header/footer
   scope): the original markup was a flat <div id="crumbs"> whose children (a, span.gap,
   span.current) flowed inline by default. A <ul>/<li> is block-level by default, so
   without this the trail wraps onto one line per crumb instead of staying inline. */
.inner_banner_breadcrumb #crumbs ul {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.inner_banner_breadcrumb #crumbs li {
	display: inline-flex;
	align-items: center;
}

/* "Our Clients" carousel Pause/Play toggle (accessibility-fixes.js addCarouselPauseControl,
   audit row 30): a small corner overlay on the carousel itself rather than a plain
   <button> left in normal document flow, which read as a stray, unstyled, video-style
   control sitting on its own line below the logos.
   Slick's own slick.css sets `.ult-carousel-wrapper { visibility: hidden }` as a
   flash-of-unstyled-carousel guard, un-hidden only via `.slick-initialized { visibility:
   visible }` on the INNER track - not the outer wrapper div itself. This button is
   appended as a direct child of that outer wrapper, so without its own override here
   it silently inherits the hidden state (still fully laid out/positioned, just
   invisible) even though the carousel's own content renders fine - caught by a live
   screenshot, not by DOM-presence checks alone. */
.ult-carousel-wrapper .carousel-pause-toggle {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #d5d5d5;
	border-radius: 50%;
	background: #ffffff;
	color: #1d75bc;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	visibility: visible;
}

.ult-carousel-wrapper .carousel-pause-toggle:hover {
	background: #f2f6fa;
}

/* Mega menu submenu reveal on keyboard focus (accessibility-fixes.js
   fixMegaMenuKeyboard): the plugin's own rt-megamenu.css shows a submenu via
   `li.rt-mega-menu-open > .rt-sub-menu { visibility: visible; }` on mouse hover,
   and our JS adds that same class on focus - but radiantthemes-custom.css's
   `.nav > [class*="menu-"] > ul.menu > li > ul { visibility: hidden !important; }`
   (specificity 0,3,3 - the [class*=] attribute selector counts as a class, and it
   has three tag-level selectors to our one) keeps winning even against our first
   attempt at overriding this (0,3,1) - confirmed via the live CSSOM rule list, not
   guessed. Padding out the tag count is what actually needs to change here, not
   the !important (verification R1: Tab skips straight from "About Us" to "Our
   Activities", never reaching the submenu at all). */
html body li.rt-mega-menu-hover.rt-mega-menu-open > ul.rt-sub-menu,
html body li.rt-mega-menu-hover.rt-mega-menu-open > ul.rt-mega-menu,
html body li.rt-mega-menu-hover.rt-mega-menu-tab-open > ul.rt-sub-menu,
html body li.rt-mega-menu-hover.rt-mega-menu-tab-open > ul.rt-mega-menu {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Restore a visible keyboard-focus indicator.
   Parent theme's radiantthemes-custom.css sets `* { outline: none !important; }`.
   `*:focus-visible` has higher specificity than the bare `*` selector, so this wins
   for keyboard focus while leaving mouse-click focus (no outline) untouched.

   A single outline colour can't hit 3:1 against every background on this site -
   verification R1 caught it failing against the footer's dark blue (#1D75BC, an even
   darker footer sub-section #273272) AND a light purple-grey card background
   (#A5ABCA) with the same #005fcc. Two concentric rings, one white one black, is the
   standard fix: whichever background color it lands on, one of the two rings sits at
   the opposite end of the luminance range from it and clears 3:1 - verified below
   against every background color exposed by this specific set of findings, not just
   guessed from the two extremes. */
*:focus-visible {
	outline: 2px solid #000000 !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 4px #ffffff !important;
}

/* Skip-to-content link: hidden off-screen until keyboard-focused. */
.skip-link.screen-reader-text {
	display: block;
	position: absolute;
	top: -60px;
	left: 6px;
	z-index: 100000;
	background: #ffffff;
	color: #1d75bc;
	padding: 10px 18px;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
}

.skip-link.screen-reader-text:focus {
	top: 6px;
	outline: 3px solid #005fcc !important;
	outline-offset: 2px !important;
}

/* Back to Top control is now a real <button>; strip default button chrome so it
   keeps the exact look the old <div class="scrollup"> had. */
body > button.scrollup {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font: inherit;
}

/* Back to Top vs. cookie-consent banner overlap (audit item, functional issue row 75):
   the banner's rendered height varies by viewport (141px desktop, 369px on a 375px-wide
   phone, more at 200%+ zoom since the text reflows), so a fixed CSS offset can't track it —
   accessibility-fixes.js measures the live banner and sets an inline `bottom` on the button
   whenever it's actually visible, clearing it back to the parent theme's default otherwise.
   The parent theme's own `body > .scrollup { transition: all 0.3s ease-in-out; }` already
   animates that inline change smoothly, so no extra CSS is needed here. */

/* Contrast fixes — text under 4.5:1 against its background (WCAG 1.4.3).
   !important is required here: the parent theme's own rules
   (.header_top_item .header-data-social p, .footer_copyright_item ul.menu li a{color:inherit})
   are equal-or-higher specificity, so a plain override is silently lost to the cascade. */
.header-data-social p {
	color: #ffffff !important;
}

.inner_banner_breadcrumb #crumbs a,
.inner_banner_breadcrumb #crumbs {
	color: #ffffff;
}

.wraper_footer_copyright .footer_copyright_item p,
.wraper_footer_copyright .footer_copyright_item a,
.wraper_footer_copyright .footer_copyright_item ul.menu li,
.wraper_footer_copyright .footer_copyright_item ul.menu li a {
	color: #ffffff !important;
}

/* Footer contact form (CF7 id 7229) — visible labels, required-field note,
   and format hints added in wp-admin form content; style them to match the
   existing placeholder-driven look instead of default browser label styling. */
.wpcf7[data-wpcf7-id="7229"] .cf7-required-note {
	font-size: 12px;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 10px 0;
}

/* Labels are visible (verification R1 row 69 explicitly requires an on-screen
   <label>, the same as the Search Documents field elsewhere - a screen-reader-
   only version had been used first to keep the original placeholder-only look,
   but that doesn't satisfy this row). Kept small/compact against the footer's
   dark background so it reads as a caption above the field rather than a large
   visual element. */
.wpcf7[data-wpcf7-id="7229"] .form-row label {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 4px 0;
}

.wpcf7[data-wpcf7-id="7229"] .cf7-hint {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: #ffffff;
	margin-top: 4px;
}

/* Submission failsafe message (accessibility-fixes.js addCf7SubmissionFailsafe):
   inherits the theme's default body text colour (#464646) since it sets none of
   its own, which is only 1.94:1 against this footer's blue background. */
.wpcf7[data-wpcf7-id="7229"] .wpcf7-response-output {
	color: #ffffff;
}

/* Typed text in the Phone field was invisible - white on the field's own white
   background. CF7 wraps every field in its own <p>, and the theme's
   .footer_main_item p { color: #fff } (meant for the address paragraphs
   elsewhere in this same footer widget column) inherits down into whichever
   input sits inside that paragraph. Name/E-mail/Message happen to already get
   a dark color from another rule elsewhere that doesn't include input[type=tel]
   in its selector list, so Phone was the one gap - fixing all four here
   directly rather than relying on inheritance from an unrelated rule. */
.wpcf7[data-wpcf7-id="7229"] .form-row input[type="text"],
.wpcf7[data-wpcf7-id="7229"] .form-row input[type="email"],
.wpcf7[data-wpcf7-id="7229"] .form-row input[type="tel"],
.wpcf7[data-wpcf7-id="7229"] .form-row textarea {
	color: #333333;
}

/* Contact Us page CF7 form (id 7228) — same visible-labels/required-note/hint
   pattern as the footer form above, styled for its light (not dark footer)
   background instead. */
.wpcf7[data-wpcf7-id="7228"] .cf7-required-note {
	font-size: 12px;
	line-height: 1.3;
	color: #595959;
	text-align: center;
	margin: 0 0 10px 0;
}

/* Visible (verification R1 row 56 explicitly requires an on-screen <label> here
   too, same as the footer form and Search Documents field). */
.wpcf7[data-wpcf7-id="7228"] .form-row label {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: #595959;
	margin: 0 0 4px 0;
}

.wpcf7[data-wpcf7-id="7228"] .cf7-hint {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: #595959;
	margin-top: 4px;
}

/* Row 24 (1.4.11 non-text contrast): the focus border-color transition
   (inherited from the base form-control style) is caught mid-fade by
   automated contrast tools, measuring a washed-out intermediate shade
   instead of the final #ff5e14 (~3.1:1, passes). Making the change instant
   removes that low-contrast transient frame without altering the final look. */
.wpcf7-form .form-row input:focus,
.wpcf7-form .form-row textarea:focus,
.wpcf7-form .form-row select:focus {
	transition: none !important;
}

/* Hero RevSlider "INVEST NOW" / "KNOW MORE" buttons (audit row 39, 2.4.7) — RevSlider's
   own rs6.css has `.rs-layer *:not(.rs-wtbindex) { outline: none !important; }`
   (specificity 0,2,0), which beats the universal `*:focus-visible` rule above (0,1,0).
   Match its specificity pattern with an extra class to win instead of fighting harder
   with more !important on the same losing selector shape. Box-shadow gets !important
   too since RevSlider also sets a plain (non-important) inline `box-shadow: none`. */
.rs-layer.rev-btn:focus-visible {
	outline: 3px solid #ffffff !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.65) !important;
}

/* Home page: "Read More" buttons under Merchant Banking / Proprietary Investments /
   Mutual Funds (audit row 19, 1.4.3) — #0088cc on white is 3.89:1, fails 4.5:1.
   Scoped to el_class="home-service-readmore" (added on just these 3 vc_btn shortcodes)
   rather than overriding .vc_btn3-color-primary globally, since that class is likely
   used by other buttons elsewhere on the site. #1d75bc is the site's own existing
   brand blue (already verified 4.86:1 on white in the header/footer work). */
.vc_btn3-container.home-service-readmore a.vc_btn3-color-primary {
	color: #1d75bc !important;
	border-color: #1d75bc !important;
}

/* The !important above also wins over the theme's own hover rule
   (.vc_btn3-color-primary.vc_btn3-style-outline:hover { color:#fff }), leaving hover
   text the same blue as the hover background (#0088cc) it turns into - invisible, and
   still fails contrast even if simply forced back to white since #0088cc-on-white and
   white-on-#0088cc are the same 3.89:1 ratio. Use the brand blue as the hover fill
   instead (white on #1d75bc is 4.86:1, already verified above) rather than the
   theme's default hover blue. */
.vc_btn3-container.home-service-readmore a.vc_btn3-color-primary:hover {
	color: #ffffff !important;
	background-color: #1d75bc !important;
	border-color: #1d75bc !important;
}