/* ==================================================================
   GIGW 3.0 / WCAG 2.2 remediation stylesheet
   Loaded LAST on every page so it overrides theme defaults.
   Last revised: 15-Oct-2026 (Re-audit non-compliance observations)
   ================================================================== */

/* ---------- 2.4.7 / 1.4.11  Visible, high-contrast keyboard focus ----------
   Two-tone ring: dark outline (visible on light backgrounds) plus a yellow
   halo (visible on dark backgrounds). Meets 3:1 against any surface.        */
a:focus, button:focus, input:focus, textarea:focus, select:focus,
[tabindex]:focus, summary:focus {
    outline: 3px solid #0b0c0c !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffdd00 !important;
}
/* Links and buttons keep the ring however they receive focus (keyboard,
   mouse, touch or script) so the focused item is always identifiable
   (GIGW 5.2.12 / WCAG 1.4.1, 2.4.7).                                    */
/* Programmatic focus targets (main, modal) should not show a big ring */
#main-content:focus, .modal:focus { outline: none !important; box-shadow: none !important; }

/* ---------- 2.4.11  Focus not obscured by the sticky menu ----------
   scroll-padding makes the browser keep focused elements below the
   fixed menu bar when tabbing.                                          */
html { scroll-padding-top: 110px; }
#main-content, :target { scroll-margin-top: 110px; }

/* On short screens (landscape phones, 400% zoom) the sticky menu would
   cover most of the viewport, so it scrolls away normally instead
   (1.3.4 Orientation, 1.4.10 Reflow at 256px height).                   */
@media (max-height: 500px), (max-width: 767px) {
    .mainmenu-area.stricky-fixed { position: relative !important; }
    html { scroll-padding-top: 0; }
}

/* ---------- Visually hidden text (read by screen readers) ---------- */
.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ---------- 2.4.1  Skip to main content ---------- */
.skip-link {
    position: absolute; left: 8px; top: -100px; z-index: 100001;
    background: #000080; color: #fff !important;
    padding: 10px 16px; font-weight: 600; text-decoration: underline !important;
    border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }

/* ---------- Accessibility toolbar (text size, contrast, search) ---------- */
.a11y-bar { background: #f2f2f2; border-bottom: 1px solid #767676; font-size: 14px; color: #1a1a1a; }
.a11y-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 6px 15px; }
.a11y-bar .a11y-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
.a11y-bar .a11y-group > span { font-weight: 600; margin-right: 4px; }
.a11y-bar button {
    min-width: 32px; min-height: 32px; padding: 2px 10px;
    background: #fff; color: #1a1a1a; border: 1px solid #595959; border-radius: 3px;
    font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.a11y-bar button[aria-pressed="true"] { background: #000080; color: #fff; border-color: #000080; }
.a11y-bar a { color: #1a1a1a; text-decoration: underline; font-weight: 600; }
.site-search { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-search label { font-weight: 600; margin: 0 4px 0 0; }
.site-search input {
    width: 170px; max-width: 100%; min-height: 32px; padding: 2px 8px;
    border: 1px solid #595959; border-radius: 3px; color: #1a1a1a; background: #fff;
}
@media (max-width: 767px) {
    .site-search { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .site-search label { flex: 0 0 100%; }
    .site-search input { flex: 1 1 120px; width: auto; min-width: 0; }
}

/* ---------- 1.4.3  Text contrast fixes ---------- */
/* Disclaimer strip: solid dark background instead of image */
header .top_header { background: #262c36 !important; height: auto !important; }
header .top_header p { color: #e3e7ec !important; float: none !important; text-align: center; margin: 0; padding: 6px 0; line-height: 1.5; }
header .top_bar p { color: #b00000; text-align: center; line-height: 1.6; padding: 4px 0; }
/* Main menu: teal darkened from #13A0B2 (3.1:1) to #0E7280 (5.6:1 with white) */
.mainmenu-area .container,
.mainmenu-area.stricky-fixed,
.mainmenu-area .nav_main_list,
.mainmenu-area .nav_main_list ul { background: #0e7280 !important; }
.mainmenu-area nav > .nav_main_list ul li a { color: #fff !important; }
.mainmenu-area nav > .nav_main_list ul li:hover > a,
.mainmenu-area nav > .nav_main_list ul li > a:focus,
.mainmenu-area nav > .nav_main_list ul li > a[aria-current="page"] { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
/* Quick links / content sit on a plain white background (was a photo) */
.testimonial_sec { background: #fff !important; }
.testimonial_sec, .testimonial_sec p, .testimonial_sec li { color: #333; }
/* Contact icons: darker teal (>= 4.5:1 on white) */
.contact_us_container .icon_holder .icon { color: #0e7280 !important; }

/* ---------- 1.4.11  Form field and button boundaries (>= 3:1) ---------- */
.contact-form input, .contact-form textarea {
    border: 1px solid #6b6b6b !important;
    color: #1a1a1a !important; background: #fff !important;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #595959; }
.contact-form .field-hint { display: block; text-align: left; font-size: 13px; color: #444; margin: 0 0 4px; }

/* ---------- 3.3.1 / 3.3.3  Error identification (text + icon, not colour alone) ---------- */
.contact-form .field-error {
    display: block; text-align: left; color: #b00000; font-size: 14px; font-weight: 600; margin: 4px 0 8px;
}
.contact-form .field-error::before { content: "\26A0  Error: "; }
.contact-form [aria-invalid="true"] { border: 2px solid #b00000 !important; background: #fff5f5 !important; }
.error-summary {
    text-align: left; border: 3px solid #b00000; padding: 12px 16px; margin: 0 0 16px; background: #fff;
}
.error-summary h3 { font-size: 18px; margin: 0 0 8px; color: #b00000; }
.error-summary ul { margin: 0; padding-left: 20px; list-style: disc; }
.error-summary a { color: #b00000 !important; text-decoration: underline; font-weight: 600; }
.form-status:not(:empty) { text-align: left; padding: 10px 14px; margin-bottom: 12px; border: 2px solid #0e7280; background: #eef7f8; color: #1a1a1a; }

/* ---------- 1.3.1  Headings / lists that replace <br> spacing ---------- */
.page-content h1 { font-size: 30px; margin: 30px 0 20px; color: #222; }
.page-content h2 { font-size: 22px; margin: 26px 0 12px; color: #222; }
.page-content h3 { font-size: 18px; margin: 20px 0 8px; color: #222; }
.page-content p, .page-content li { text-align: left; color: #333; line-height: 1.7; }
.page-content ol, .page-content ul.bullets { padding-left: 24px; margin-bottom: 16px; }
.page-content ol { list-style: decimal; }
.page-content ol.alpha { list-style: lower-roman; }
.page-content ul.bullets { list-style: disc; }
.page-content a { color: #175e9c; text-decoration: underline; }
.page-content .doc-meta { text-align: right; font-style: italic; }
.link-list { list-style: none; padding: 0; }
.link-list li { margin-bottom: 12px; }
.company h2, .sec-title h2 { margin-bottom: 16px; }
.attention-list { list-style: decimal; padding-left: 24px; }
.attention-list li { margin-bottom: 10px; text-align: left; }
.company ol, .company ul.bullets { padding-left: 24px; }
.company ol { list-style: decimal; }
.company ul.bullets { list-style: disc; }

/* ---------- 1.4.10  Reflow at 320px ---------- */
img { max-width: 100%; height: auto; }
body { overflow-wrap: break-word; }
.mainmenu-area .find-advisor:before { display: none; }
@media (max-width: 1170px) {
    .mainmenu-area .find-advisor { float: none !important; margin: 0; }
    .mainmenu-area .find-advisor a.advisor { line-height: 1.4 !important; padding: 12px 15px !important; font-size: 15px; }
}
@media (max-width: 767px) {
    .row { margin-left: 0; margin-right: 0; }
    .container { padding-left: 12px; padding-right: 12px; }
    [class*="col-"] { padding-left: 0; padding-right: 0; }
    .slider-toggle { right: 6px; bottom: 6px; }
    .grievance-table, .grievance-table thead, .grievance-table tbody,
    .grievance-table tr, .grievance-table th, .grievance-table td { display: block; width: 100%; }
    .grievance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .grievance-table tr { margin-bottom: 12px; border: 1px solid #767676; }
    .grievance-table td::before { content: attr(data-label) ": "; font-weight: 700; }
    .footer_help_links { justify-content: flex-start; }
    .bottom_footer p.float_left, .bottom_footer p.float_right { float: none !important; }
}
/* Risk disclosure dialog: always scrollable, never wider than the screen */
.invst_chrt { padding: 10px 20px 20px; text-align: left; border-top: 1px solid #767676; font-size: 15px; }
.invst_chrt ul { margin: 0 0 12px; padding: 0; }
.invst_chrt ul li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.invst_chrt ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; background: #1a1a1a; }
.invst_chrt a { color: #175e9c; text-decoration: underline; }
.modal .modal-header { padding: 16px 20px; }
.modal button.close {
    position: absolute; right: 12px; top: 12px; z-index: 99;
    width: 36px; height: 36px; padding: 0; margin: 0;
    border-radius: 50%; background: #b00000; color: #fff; opacity: 1;
    font-size: 28px; line-height: 34px; text-align: center; text-shadow: none;
}
.modal button.close:hover { background: #7a0000; color: #fff; opacity: 1; }
.modal .btn-primary { background: #000080; border-color: #000080; color: #fff; }
.modal-dialog { width: auto; max-width: 700px; margin: 20px auto; padding: 0 10px; }
.modal-content { max-height: calc(100vh - 40px); overflow-y: auto; }
.modal .modal-title { font-size: 20px; margin: 0; padding-right: 40px; }
.modal .invst_chrt h3 { font-size: 17px; margin: 0 0 10px; }

/* Footer: last-updated line */
.last-updated { clear: both; text-align: center; color: #d3d8dd; font-size: 14px; margin: 0; padding-top: 6px; }

/* ---------- 1.4.11  High-contrast mode (user option in the toolbar) ---------- */
html.high-contrast body :where(*:not(img, .skip-link, .tp-bgimg)) {
    background-color: #000 !important; background-image: none !important; border-color: #fff !important;
}
html.high-contrast .search-status, html.high-contrast .form-status, html.high-contrast .error-summary { border: 2px solid #fff !important; }
html.high-contrast body { background: #000 !important; color: #fff !important; }
html.high-contrast p, html.high-contrast li, html.high-contrast h1, html.high-contrast h2,
html.high-contrast h3, html.high-contrast h4, html.high-contrast h5, html.high-contrast h6,
html.high-contrast span, html.high-contrast label, html.high-contrast address,
html.high-contrast strong, html.high-contrast b, html.high-contrast caption { color: #fff !important; }
html.high-contrast a, html.high-contrast a span, html.high-contrast .mainmenu-area .find-advisor a.advisor { color: #ffff00 !important; text-decoration: underline !important; }
html.high-contrast button, html.high-contrast input, html.high-contrast textarea,
html.high-contrast .a11y-bar button, html.high-contrast .slider-toggle, html.high-contrast .slider-nav,
html.high-contrast .contact-form button.submit, html.high-contrast button.close {
    background: #000 !important; color: #fff !important; border: 2px solid #fff !important;
}
html.high-contrast .a11y-bar button[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; }
html.high-contrast .icon, html.high-contrast .fa { color: #fff !important; }
html.high-contrast .field-error, html.high-contrast .error-summary h3, html.high-contrast .error-summary a { color: #ff9f9f !important; }
html.high-contrast a:focus, html.high-contrast button:focus, html.high-contrast input:focus,
html.high-contrast textarea:focus { outline-color: #ffff00 !important; box-shadow: 0 0 0 2px #000 !important; }
html.high-contrast .logo img { background: #fff; padding: 4px; }

/* ---------- Text size option (A- / A / A+) ---------- */
html[data-text-size="1"] main p, html[data-text-size="1"] main li, html[data-text-size="1"] main td,
html[data-text-size="1"] main th, html[data-text-size="1"] main label, html[data-text-size="1"] main address,
html[data-text-size="1"] main input, html[data-text-size="1"] main textarea { font-size: 18px !important; }
html[data-text-size="2"] main p, html[data-text-size="2"] main li, html[data-text-size="2"] main td,
html[data-text-size="2"] main th, html[data-text-size="2"] main label, html[data-text-size="2"] main address,
html[data-text-size="2"] main input, html[data-text-size="2"] main textarea { font-size: 21px !important; }
html[data-text-size="-1"] main p, html[data-text-size="-1"] main li, html[data-text-size="-1"] main td,
html[data-text-size="-1"] main th, html[data-text-size="-1"] main label, html[data-text-size="-1"] main address { font-size: 14px !important; }

/* Search results on the sitemap page */
.search-status:not(:empty) { font-weight: 600; margin: 10px 0 20px; padding: 8px 12px; border-left: 4px solid #0e7280; background: #eef7f8; }
.sitemap_container .search-hidden { display: none; }

/* ---------- 2.5.1 / 2.2.2  Slideshow controls ----------
   Previous / Pause-Play / Next buttons sit above the slider layers so they
   are always visible, operable with a single tap or click, and never
   obscured when focused (2.4.11).                                        */
.rev_slider_wrapper .slider-controls {
    position: absolute; right: 14px; bottom: 14px; z-index: 1000;
    display: flex; gap: 8px; margin: 0; padding: 0;
}
.rev_slider_wrapper .slider-controls .slider-toggle,
.rev_slider_wrapper .slider-controls .slider-nav {
    position: static; min-height: 44px; min-width: 44px; padding: 8px 14px;
    background: rgba(0, 0, 0, 0.8); color: #fff; border: 2px solid #fff; border-radius: 4px;
    font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.rev_slider_wrapper .slider-controls .slider-nav span[aria-hidden] { font-size: 20px; line-height: 1; vertical-align: -1px; }
.rev_slider_wrapper .slider-controls button:hover,
.rev_slider_wrapper .slider-controls button:focus { background: #000080; color: #fff; }
@media (max-width: 767px) {
    .rev_slider_wrapper .slider-controls { right: 6px; bottom: 6px; gap: 4px; }
    .rev_slider_wrapper .slider-controls .slider-toggle,
    .rev_slider_wrapper .slider-controls .slider-nav { padding: 6px 10px; font-size: 13px; }
}

/* ---------- 1.3.4  Orientation: pages scroll in portrait and landscape ----------
   body{overflow-x:hidden} (theme, <1200px) turns <body> into its own scroll
   box on some mobile browsers, so touch scrolling in portrait gets stuck.
   Horizontal clipping moves to the root element and <body> stays a normal
   block, so the document itself always scrolls vertically.              */
html { overflow-x: hidden; overflow-y: auto; height: auto !important; touch-action: manipulation; }
body { overflow: visible !important; height: auto !important; min-height: 100%; position: static; }

/* ---------- 1.4.11  Non-text contrast: Send message button ----------
   The yellow fill (#F6BA18) was only 1.8:1 against the white page.
   Dark teal fill #0E7280 = 5.6:1 against white (and 5.6:1 for white text). */
.contact_us_container .form_holder button.submit,
.contact-form button.submit {
    background: #0e7280 !important; color: #fff !important;
    border: 2px solid #0e7280 !important;
}
.contact_us_container .form_holder button.submit i { color: #fff !important; }
.contact_us_container .form_holder button.submit:before,
.contact_us_container .form_holder button.submit:after { background: rgba(255, 255, 255, 0.6) !important; }
.contact_us_container .form_holder button.submit:hover,
.contact_us_container .form_holder button.submit:focus {
    background: #171b20 !important; border-color: #171b20 !important; color: #fff !important;
}
.contact_us_container .form_holder button.submit:hover i,
.contact_us_container .form_holder button.submit:focus i { color: #fff !important; }
/* High-contrast option: button keeps a clear white outline on black */
html.high-contrast .contact_us_container .form_holder button.submit,
html.high-contrast .contact_us_container .form_holder button.submit:hover,
html.high-contrast .contact_us_container .form_holder button.submit:focus {
    background: #000 !important; color: #fff !important; border: 2px solid #fff !important;
}
html.high-contrast .contact_us_container .form_holder button.submit i { color: #fff !important; }
html.high-contrast .contact_us_container .form_holder button.submit:before,
html.high-contrast .contact_us_container .form_holder button.submit:after { background: #fff !important; }
html.high-contrast .rev_slider_wrapper .slider-controls button { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; }
html.high-contrast .rev_slider_wrapper .slider-controls button:focus { outline-color: #ffff00 !important; }

/* ---------- 1.4.1  Use of colour: links never rely on colour alone ----------
   Every text link in page content and the footer is underlined. On hover
   and focus it also gets a yellow highlight with dark text plus a thicker
   underline, so it stands out without needing to see colour.
   Menu-bar items get the same highlight on hover / focus.                                       */
main a[href], footer a[href], .a11y-bar a[href], .modal-body a[href] {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
main a[href]:hover, main a[href]:focus,
footer a[href]:hover, footer a[href]:focus,
.a11y-bar a[href]:hover, .a11y-bar a[href]:focus,
.modal-body a[href]:hover, .modal-body a[href]:focus {
    background-color: #ffdd00 !important;
    color: #0b0c0c !important;
    text-decoration-thickness: 3px !important;
}
/* Links wrapping an image (e.g. logo) - no underline, ring on focus only */
a[href]:has(> img:only-child) { text-decoration: none !important; }
/* Main menu and Back Office Login: underlined too; the current page has a
   thicker underline and bold text so it is not shown by colour alone */
.mainmenu-area nav > .nav_main_list ul li > a,
.mainmenu-area .find-advisor a.advisor { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mainmenu-area nav > .nav_main_list ul li > a[aria-current="page"] { text-decoration-thickness: 3px !important; font-weight: 800; }
/* Main menu: highlight on hover / focus */
.mainmenu-area nav > .nav_main_list ul li > a:hover,
.mainmenu-area nav > .nav_main_list ul li > a:focus {
    background: #ffdd00 !important; color: #0b0c0c !important;
    text-decoration: underline !important; text-decoration-thickness: 3px !important;
}
.mainmenu-area .find-advisor a.advisor:hover,
.mainmenu-area .find-advisor a.advisor:focus { text-decoration: underline !important; text-decoration-thickness: 3px !important; }
/* High-contrast option: focused / hovered links invert to yellow on black */
html.high-contrast main a[href]:hover, html.high-contrast main a[href]:focus,
html.high-contrast footer a[href]:hover, html.high-contrast footer a[href]:focus,
html.high-contrast .mainmenu-area nav > .nav_main_list ul li > a:hover,
html.high-contrast .mainmenu-area nav > .nav_main_list ul li > a:focus {
    background-color: #ffff00 !important; color: #000 !important;
}
/* Text inside a highlighted link (e.g. "opens in a new window") follows the link colour */
main a[href]:hover *, main a[href]:focus *, footer a[href]:hover *, footer a[href]:focus *,
.mainmenu-area nav > .nav_main_list ul li > a:hover *, .mainmenu-area nav > .nav_main_list ul li > a:focus *,
html.high-contrast main a[href]:hover *, html.high-contrast main a[href]:focus *,
html.high-contrast footer a[href]:hover *, html.high-contrast footer a[href]:focus * { color: inherit !important; background: transparent !important; }

/* ---------- 1.4.10  Reflow: Contact page "Office contact details" box ----------
   The theme fixed this box at 528px and each entry at 116px. At 320px width
   (or 400% zoom) the text wraps onto more lines, and with the Compliance
   Officer entry the content spilled out over the "Investor Grievance
   Escalation Matrix" heading. Heights now follow the content.          */
.contact_us_container .address {
    height: auto !important; min-height: 0 !important;
    padding-bottom: 24px; margin-bottom: 30px;
}
.contact_us_container .address address {
    height: auto !important; min-height: 0;
    padding-bottom: 19px; overflow-wrap: anywhere;
}
/* Icon + text side by side; text takes the remaining width and wraps */
.contact_us_container .address address.clear_fix { display: flex; align-items: flex-start; }
.contact_us_container .address .icon_holder { float: none !important; flex: 0 0 auto; }
.contact_us_container .address .address_holder { float: none !important; flex: 1 1 auto; min-width: 0; }
.contact_us_container .grievance_matrix { clear: both; }
@media (max-width: 767px) {
    .contact_us_container .address { padding-left: 20px; padding-right: 12px; }
    .contact_us_container .icon_holder span { font-size: 2.2em; padding-right: 14px; }
}

/* ---------- 1.4.12  Text spacing option (toolbar: Line spacing Wide) ----------
   Applies the WCAG 1.4.12 test values: line height 1.5x or more, paragraph
   spacing 2x, letter spacing 0.12em, word spacing 0.16em. Fixed heights in
   the theme were already removed, so nothing overlaps or is cut off.    */
html[data-spacing="wide"] main *,
html[data-spacing="wide"] footer *,
html[data-spacing="wide"] header .top_header p,
html[data-spacing="wide"] header .top_bar p,
html[data-spacing="wide"] .modal-body * {
    line-height: 1.9 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
html[data-spacing="wide"] main p,
html[data-spacing="wide"] .modal-body p { margin-bottom: 2em !important; }
html[data-spacing="wide"] main li { margin-bottom: 0.75em; }

/* ---------- 2.5.8  Target size: links and controls at least 24 x 24 px ----------
   Links in lists (exchange websites, quick links, sitemap, PDFs) and the
   toolbar Sitemap link get a 24px minimum tap height plus spacing.      */
main ul li > a[href], main ol li > a[href], footer li > a[href] {
    display: inline-block;
    min-height: 24px;
    padding: 2px 0;
}
main ul.bullets li, main ul.link-list li { margin-bottom: 6px; }
.a11y-bar a[href] {
    display: inline-flex; align-items: center;
    min-height: 32px; min-width: 32px; padding: 0 6px;
}