/*---------------------------------------------------------------------
    File Name: a11y.css
    Accessibility overrides (WCAG 2.1 / 2.2 level AA).
    Loaded AFTER style.css and responsive.css so it wins the cascade.
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
   1) Skip to main content link
---------------------------------------------------------------------*/

.skip-link {
     position: absolute;
     top: -100px;
     left: 16px;
     z-index: 10000000;
     display: inline-block;
     padding: 12px 22px;
     background: #180552;
     color: #fff !important;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.4;
     border: 2px solid #fff;
     border-radius: 0 0 6px 6px;
     text-decoration: underline !important;
     transition: top .2s ease-in-out;
}

.skip-link:focus {
     top: 0;
     outline: 3px solid #fbca47 !important;
     outline-offset: 2px !important;
}


/*---------------------------------------------------------------------
   2) Visible keyboard focus (2.4.7 / 2.4.11)
   style.css sets `outline: none !important` and `:focus { outline: 0 }`,
   which removes the focus ring everywhere. Put it back.
---------------------------------------------------------------------*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
     outline: 3px solid #0b4fd1 !important;
     outline-offset: 2px !important;
     border-radius: 2px;
}

/* On the dark navy footer / dark sections a light ring reads better. */
.footer a:focus-visible,
footer a:focus-visible,
.services a:focus-visible,
.popup a:focus-visible,
.popup button:focus-visible {
     outline: 3px solid #ffd85c !important;
     outline-offset: 2px !important;
}

/* Browsers without :focus-visible still get a ring. */
a:focus,
button:focus,
[tabindex]:focus {
     outline-color: #0b4fd1;
}

/* The main landmark is focused programmatically by the skip link;
   it must not paint a focus ring of its own. */
main:focus,
main:focus-visible {
     outline: none !important;
}


/*---------------------------------------------------------------------
   3) Nav + footer links underlined by default (1.4.1)
   style.css forces `text-decoration: none !important` globally.
---------------------------------------------------------------------*/

.navigation.navbar-dark .navbar-nav .nav-link,
.navigation.navbar-dark .navbar-nav .dropdown-item,
.dropdown-menu .dropdown-item,
.footer a,
footer a,
.copyright a,
ul.link_icon li a,
ul.location_icon li a {
     text-decoration: underline !important;
     text-underline-offset: 3px;
}

/* Dropdown toggles are real <button> elements now (they open a menu, they
   do not navigate). Strip the UA button chrome so they match the links. */
button.nav-link.dropdown-toggle {
     background: transparent;
     border: 0;
     border-bottom: 1px solid transparent;
     font: inherit;
     text-transform: uppercase;
     cursor: pointer;
     display: inline-block;
}

/* Links inside running text must not rely on colour alone (1.4.1). */
main a,
.bitcoins a,
.about a,
blockquote a,
td a {
     text-decoration: underline !important;
     text-underline-offset: 3px;
}

/* Icon-only links and the button-styled CTAs are not text-block links. */
.footer a.logo2,
footer a.logo2,
.footer a[aria-label] > i:only-child,
.carousel-control-prev,
.carousel-control-next,
a.read_more,
main a.read_more {
     text-decoration: none !important;
}


/*---------------------------------------------------------------------
   4) Text colour contrast (1.4.3)
   #fbca47 gold gives only 1.54:1 on white/light panels. Use a dark gold
   on light backgrounds and keep the light gold only on the navy ones.
---------------------------------------------------------------------*/

/* The footer sits on #180552; its links must be light, not the global
   #222 that style.css sets on every <a>. */
.footer a,
footer a {
     color: #ffffff;
}

.footer a:hover,
footer a:hover,
.footer a:focus,
footer a:focus {
     color: #ffd85c;
}

/* The mail / phone icons moved out of their <a> (an icon-only link with
   the text beside it has no accessible name). Keep their look. */
ul.location_icon li > i {
     font-size: 30px;
     color: #fff;
     line-height: 30px;
     padding-right: 16px;
     float: left;
}

/* ...and the 30px sizing that rule carried was for the icon, not for the
   e-mail / phone text that now lives inside the link. */
ul.location_icon li > a {
     font-size: 18px;
     line-height: 30px;
     padding-right: 0;
     float: none;
}

/* Footer column headings are siblings; keep them at one level and keep
   the template's type scale. */
.footer h2 {
     color: #fff;
     font-weight: 400;
     font-size: 30px;
     line-height: 40px;
     text-align: left;
     margin-bottom: 19px;
     margin-top: 9px;
     text-transform: uppercase;
}

/*  style.css sets `body { color: #fff }` and `h1..h6 { color: #fff }`, which
    suits the dark hero and services bands but makes body copy and headings
    invisible on the light content pages (Investor Charter, Contact, About).
    Give everything inside <main> a readable dark default, then hand the
    white back to the genuinely dark sections. */
main,
.bitcoins,
.bitcoins .container {
     color: #1b1b1b;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.bitcoins h1,
.bitcoins h2,
.bitcoins h3,
.bitcoins h4,
.bitcoins h5,
.bitcoins h6 {
     color: #202020;
}

/* Give the content pages a visible heading hierarchy - the template's
   h1..h6 sizes are within 2px of each other. */
.bitcoins .container > h1,
.bitcoins .container > h1.style4,
.bitcoins .container > h1.style5,
.bitcoins .container > h1.style8 {
     font-size: 34px;
     line-height: 1.3;
     padding-bottom: 16px;
}

.bitcoins .container > h2 {
     font-size: 24px;
     line-height: 1.3;
     padding-top: 18px;
     padding-bottom: 8px;
}

.bitcoins .container h3 {
     font-size: 19px;
     line-height: 1.4;
     padding-top: 12px;
     padding-bottom: 4px;
}

/* Dark bands keep the light type. */
.services,
.services h1,
.services h2,
.services h3,
.services h4,
.services p,
.subscribe,
.subscribe h3,
.subscribe p,
.footer,
footer {
     color: #fff;
}

.services h1,
.services h2,
.services h3,
.services h4 {
     color: #fff;
}

/* The three service cards all carried id="ho_color". Duplicate ids are
   invalid, so they became a class - re-point the hover styles. */
.ho_color:hover.services_main h3 {
     color: #fbca47;
     transition: ease-in all 0.5s;
}

.ho_color:hover .read_more {
     color: #fbca47 !important;
     border: #fbca47 solid 1px;
     transition: ease-in all 0.5s;
}

.ho_color:hover.services_main .ho {
     opacity: 1;
     transition: ease-in all 0.5s;
}

/* Some pages promote the section heading to the page's <h1>; it must keep
   the template's `.titlepage h2` look. */
.titlepage h1 {
     font-size: 45px;
     color: #202020;
     line-height: 40px;
     font-weight: normal;
     padding: 0;
     text-transform: uppercase;
     font-family: 'Roboto', sans-serif;
}

.services .titlepage h1 {
     color: #fff;
}

.yellow {
     color: #8a6300;
}

.text-bg span {
     color: #8a6300;
}

/* Navy backgrounds: the light gold passes there (9.2:1), keep it. */
.services .yellow,
.footer .yellow,
footer .yellow,
.footer a.yellow,
footer a.yellow {
     color: #fbca47;
}

/* Nav hover / focus / current state: gold on the near-white header panel
   is 1.54:1. Use the brand navy instead. */
.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover,
.navigation.navbar-dark .navbar-nav .active > .nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show > .nav-link,
.navigation.navbar-dark .navbar-nav .nav-link[aria-current="page"] {
     color: #17094c;
     /* The links already carry a text underline; the template's border-bottom
        on top of it read as a double rule. */
     border-bottom: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus::before,
.navigation.navbar-dark .navbar-nav .nav-link:hover::before,
.navigation.navbar-dark .navbar-nav .active > .nav-link::before,
.navigation.navbar-dark .navbar-nav .nav-link.active::before,
.navigation.navbar-dark .navbar-nav .nav-link.show::before,
.navigation.navbar-dark .navbar-nav .show > .nav-link::before,
.navigation.navbar-dark .navbar-nav .nav-link[aria-current="page"]::before {
     background: #17094c;
}

/* Current page marker stays visible without relying on colour alone. */
.navigation.navbar-dark .navbar-nav .nav-link[aria-current="page"] {
     font-weight: 700;
}

/* Footer "quick link" current item. */
ul.link_icon li a[aria-current="page"] {
     color: #fbca47;
     font-weight: 700;
}

/* style.css centres these; wrapped document titles in the home-page footer
   ended up ragged on both edges. */
ul.link_icon li a {
     text-align: left;
     float: none;
     line-height: 1.5;
}

ul.link_icon li {
     margin-bottom: 14px;
}

/* Dropdown items: dark text on white, underlined, with a clear hover. */
/* The page inherits `line-height: 2.80857` from <body>, which turned these
   wrapped menu items into a very tall, very loose list. Give the menu its
   own compact type. */
.dropdown-menu {
     min-width: 300px;
     padding: 6px 0;
}

.dropdown-menu .dropdown-item {
     color: #1b1b1b;
     white-space: normal;
     text-overflow: clip;
     font-size: 14px;
     line-height: 1.4;
     padding: 8px 16px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
     background-color: #17094c;
     color: #fff;
}

/*  Footer document links. The template used Bootstrap's `.alert-success`
    (dark green on pale green chips) on a dark navy footer, which reads as
    broken and fails 1.4.11 against the surrounding surface. Render them as
    ordinary underlined footer links instead. */
.footer a.alert-success,
footer a.alert-success {
     display: inline;
     padding: 0;
     margin: 0;
     border: 0;
     background: transparent !important;
     color: #ffffff !important;
     text-decoration: underline !important;
     text-underline-offset: 3px;
}

.footer a.alert-success:hover,
footer a.alert-success:hover,
.footer a.alert-success:focus,
footer a.alert-success:focus {
     color: #ffd85c !important;
}

.footer p,
footer p {
     color: #fff;
}


/*---------------------------------------------------------------------
   5) Screen-reader-only text
---------------------------------------------------------------------*/

.visually-hidden {
     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;
}


/*---------------------------------------------------------------------
   6) Carousel pause / play control (2.2.2)
---------------------------------------------------------------------*/

.banner_main {
     position: relative;
}

.carousel-motion-toggle {
     position: absolute;
     right: 24px;
     bottom: 24px;
     z-index: 20;
     width: 46px;
     height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: 2px solid #17094c;
     border-radius: 50%;
     background: #ffffff;
     color: #17094c;
     cursor: pointer;
     line-height: 1;
}

.carousel-motion-toggle:hover {
     background: #17094c;
     color: #ffffff;
}

.carousel-motion-toggle svg {
     width: 18px;
     height: 18px;
     fill: currentColor;
     pointer-events: none;
}

.carousel-motion-toggle .icon-play {
     display: none;
     margin-left: 2px;
}

.carousel-motion-toggle[aria-pressed="true"] .icon-play {
     display: block;
}

.carousel-motion-toggle[aria-pressed="true"] .icon-pause {
     display: none;
}

/* Carousel arrows are links with no text; give them a real hit area. */
#banner1 .carousel-control-prev,
#banner1 .carousel-control-next {
     text-decoration: none !important;
}


/*---------------------------------------------------------------------
   7) "Attention Investors" dialog
---------------------------------------------------------------------*/

.popup {
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
}

.cnt223 {
     max-width: 1100px;
     width: calc(100% - 20px);
     max-height: calc(100vh - 40px);
     overflow-y: auto;
     padding-top: 56px !important;
}

/* The panel is a tab stop so it can be scrolled from the keyboard. */
.cnt223:focus-visible {
     outline: 3px solid #0b4fd1 !important;
     outline-offset: -3px !important;
}

.popup-close {
     position: absolute;
     top: 10px;
     right: 12px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 16px;
     border: 2px solid #180552;
     border-radius: 4px;
     background: #180552;
     color: #ffffff;
     font-size: 14px;
     font-weight: 600;
     line-height: 1.2;
     cursor: pointer;
}

.popup-close:hover {
     background: #ffffff;
     color: #180552;
}

.popup-title {
     margin: 0 0 10px 0 !important;
     padding-right: 120px;
     color: #180552 !important;
     font-size: 18px !important;
     font-weight: 700;
}

/* The dialog body used 10px type; bring it up to a readable size. */
.cnt223 p {
     font-size: 14px !important;
     line-height: 22px;
     color: #1b1b1b !important;
     margin-bottom: 10px;
}

.cnt223 a {
     color: #0b4fd1;
     text-decoration: underline !important;
}

/* While the dialog is open the page behind it must not scroll. */
body.popup-open {
     overflow: hidden;
}


/*---------------------------------------------------------------------
   8) Respect reduced-motion preferences (2.3.3)
---------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
     html {
          scroll-behavior: auto;
     }
     *,
     *::before,
     *::after {
          animation-duration: .001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: .001ms !important;
     }
}


/*---------------------------------------------------------------------
   9) Text spacing / reflow safety (1.4.10, 1.4.12)
---------------------------------------------------------------------*/

.dropdown-menu {
     max-width: min(360px, calc(100vw - 24px));
}

table {
     max-width: 100%;
}

/* Bootstrap's reboot drops captions below the table; a table's name reads
   better above it, and #6c757d is too light on white. */
caption {
     caption-side: top;
     color: #444;
     font-weight: 600;
     text-align: left;
}

th {
     text-align: left;
}

.bitcoins .container table {
     display: block;
     overflow-x: auto;
}