/* =========================================================
ACCESSIBILITY (WCAG 2.1 AA)
Loaded after style.css on every page.
========================================================= */

/* 2.4.1 Bypass Blocks: skip link, visible on keyboard focus */
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 2000;
padding: 12px 18px;
background: #ffffff;
color: #06172d;
font-weight: 700;
border-radius: 6px;
box-shadow: 0 0 0 3px #1769d1;
}

.skip-link:focus {
top: 12px;
color: #06172d;
}

#main-content:focus {
outline: none;
}

/* 2.4.7 Focus Visible: two-tone ring that shows on light and dark backgrounds */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #1769d1 !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 5px #ffffff !important;
}

/* 1.4.3 Contrast: top bar links (were Bootstrap default blue on navy) */
.topbar a {
color: #9fd3ff;
}

.topbar a:hover {
color: #ffffff;
text-decoration: underline;
}

/* 1.4.1 Use of Color: links inside running text are underlined */
main p a:not([class]),
.table-cell a,
.kmp-cell a,
.escalation-info-box a,
.im-portal-links a {
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* 1.4.11 Non-text Contrast: form field boundaries at least 3:1 */
.contact-form .form-control,
.im-contact-page .im-form-group input,
.im-contact-page .im-form-group select,
.im-contact-page .im-form-group textarea {
border-color: #7f8fa1;
}

/* 1.4.3 Contrast: required-field asterisk */
.im-contact-page .im-form-group label span,
.contact-form .req,
.form-required-note .req {
color: #c0262d;
}

/* 3.3.1 / 3.3.3 Error identification and suggestion */
.field-error {
display: block;
margin-top: 6px;
color: #b42318;
font-size: 13px;
font-weight: 600;
}

.field-error:empty {
display: none;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
border-color: #b42318 !important;
}

.form-required-note {
font-size: 13px;
color: #536173;
margin-bottom: 16px;
}

/* Name/value list on the investors page (was plain divs) */
.im-info-table-wrap dt,
.im-info-table-wrap dd {
margin: 0;
font-weight: inherit;
}

/* Lists that keep their original card layout */
.im-plain-list {
list-style: none;
margin: 0;
padding: 0;
}

/* Compliants page: steps and portal links */
.im-steps-list {
padding-left: 1.2rem;
margin: 20px 0 0;
}

.im-steps-list > li {
margin-bottom: 14px;
}

.im-steps-list ol {
padding-left: 1.4rem;
margin-top: 6px;
list-style: lower-roman;
}

.im-portal-links {
margin-top: 18px;
}

.im-portal-links ul {
padding-left: 1.2rem;
margin: 6px 0 0;
}

/* Scrollable data tables on the contact page */
.table-responsive[tabindex],
.kmp-table-wrapper[tabindex] {
outline-offset: 4px;
}

/* 2.3.3 / general comfort: honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}

[data-aos] {
opacity: 1 !important;
transform: none !important;
}
}

/* 1.4.3 Contrast: hero label sits on the dark hero, so keep it bright */
.hero-section .hero-label {
color: #4196fa;
}

/* 1.4.3 Contrast: market card labels on the translucent dark card */
.index-row span {
color: #a9bccf;
}

/* 1.4.3 Contrast: header text over the lighter hero gradients */
.navbar-brand small {
color: #c5d3e2;
}

.nav-link.active {
color: #b5dcff !important;
text-decoration: underline;
text-underline-offset: 6px;
}

.im-contact-hero h1 span {
color: #9fd3ff;
}

/* 1.4.10 Reflow: nothing may be cut off at 320px wide */
@media (max-width: 575px) {
/* Logo text wraps instead of running off-screen; menu button stays beside it */
.navbar-brand {
flex: 1 1 0;
min-width: 0;
white-space: normal;
font-size: 17px;
}

/* Bootstrap g-5 gutters overhang the container on small phones */
.row.g-5 {
--bs-gutter-x: 1.5rem;
}
}

@media (max-width: 767px) {
/* Horizontal slide-ins start 100px off-screen; fade only on small screens */
[data-aos^="fade-left"],
[data-aos^="fade-right"] {
transform: none !important;
}
}

/* 1.4.10 / 1.4.12: the header button grows with its text instead of
   spilling over the top bar when it wraps */
.nav-account {
display: inline-flex;
align-items: center;
}

/* Small laptops (992-1199px): tighten the menu so the button fits on one line */
@media (min-width: 992px) and (max-width: 1199px) {
.custom-navbar .nav-link {
padding: 9px 7px !important;
font-size: 13px;
}

.custom-navbar .navbar-brand {
font-size: 17px;
}

.nav-account {
white-space: nowrap;
padding: 10px 12px;
font-size: 12px;
}

.custom-navbar .nav-item.ms-lg-3 {
margin-left: .5rem !important;
}
}

/* Site map page */
.im-services-page .im-section-head.im-sitemap {
text-align: left;
max-width: 760px;
margin: 0 auto;
}

.im-services-page .im-section-head.im-sitemap h2 {
font-size: 26px;
margin: 34px 0 14px;
}

.im-services-page .im-section-head.im-sitemap h2:first-child {
margin-top: 0;
}

.im-sitemap-list {
padding-left: 1.2rem;
margin: 0;
}

.im-sitemap-list li {
margin-bottom: 10px;
}

.im-sitemap-list a {
color: #0a6dc7;
text-decoration: underline;
text-underline-offset: 2px;
}

/* 1.4.1 / 1.4.3: falling prices use their own colour, with the minus sign */
.negative {
color: #ff9b9b;
font-size: 12px;
}

/* Keep focused elements clear of the fixed header when tabbing */
html {
scroll-padding-top: 110px;
}

/* 1.4.3 Contrast: placeholder text in the contact form */
.im-contact-page .im-form-group input::placeholder,
.im-contact-page .im-form-group textarea::placeholder,
.contact-form .form-control::placeholder {
color: #5f6b78;
opacity: 1;
}

/* Label/value cards marked up as description lists keep their card look */
dl.im-registration-grid,
dl.im-regulatory-grid {
margin-bottom: 0;
}

.im-registration-grid dt,
.im-registration-grid dd,
.im-regulatory-grid dt,
.im-regulatory-grid dd {
margin: 0;
font-weight: inherit;
}