/* SiliconBangla overrides on top of the Execoore template (themekit/css/style.css + css/skin.css).
   Only the overrides allowed by the blueprint (section 12.3) live here. Do not add components, colors or fonts. */

/* Montserrat, self-hosted in place of the template's Google Fonts @import (SIL Open Font License, /fonts/montserrat/OFL.txt) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-800-normal.woff2') format('woff2');
}

/* Visually hidden labels for form fields that show placeholders */
.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;
}

/* Spam trap on the forms: invisible to people, filled in by bots */
.sb-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Nav logo: the <img> tags carry width="322" height="45"; let the width follow the template's max-height (35px on mobile) */
body > nav .menu-brand img {
    width: auto;
}

/* Images carry width/height attributes; the template's img { max-width: 100% } needs height: auto to keep the ratio */
main img {
    height: auto;
}

/* Signature slot without a signature image */
.box-sign.sb-no-sign {
    padding: 0;
    margin-top: 30px;
}

.box-sign.sb-no-sign.no-margin {
    margin-top: 0;
}

/* Nav right area without cart/search/language: no dangling divider */
nav .menu-right > .custom-area:last-child {
    border-right: 0;
    padding-right: 0;
}

/* Brand logos on the dark parallax: monochrome white, like the template's media/logos/white set */
.section-image.light .table-logos img {
    filter: brightness(0) invert(1);
}

/* Multi-line icon-circle lists: the template centres the bullet on the whole item (top: 50%), so pin it to the centre
   of the first line instead (half the 30px line-height). The template's translateY(-50%) and hover scale still apply.
   The selector matches any icon-circle list that is a direct child of a .col-lg-8; today only the content column of
   /legal, /privacy and /terms has one (the /careers requirement list sits in a .col-lg-4 and is not affected). */
.col-lg-8 > ul.icon-list.icon-circle li:before {
    top: 15px;
}

/* In-page anchors clear the fixed menu */
#structure, #enquiries, #apply, #brand-support, #izzlifeshop, #coinfolytics, #casuallab-interactive {
    scroll-margin-top: 110px;
}

/* Home brand cards (cnt-box-team): while the brand link inside has keyboard focus, show the template's hover state
   (skin.css: caption height 240px, icon-links visible), so the focused link can be seen. */
.cnt-box-team:focus-within .caption {
    height: 240px;
}

.cnt-box-team:focus-within .icon-links {
    opacity: 1;
}

/* Keyboard focus ring for the template controls that set outline: none (buttons, text links, carousel arrows and
   bullets). :focus-visible only, so mouse clicks show nothing new. Template navy; white on dark areas. */
.btn:focus-visible, .btn-text:focus-visible, .glide__arrow:focus-visible, .glide__bullets > button:focus-visible {
    outline: 2px solid #004767;
    outline-offset: 3px;
}

nav .btn:focus-visible, nav .btn-text:focus-visible,
footer .btn:focus-visible, footer .btn-text:focus-visible,
.light .btn:focus-visible, .light .btn-text:focus-visible, .light .glide__arrow:focus-visible, .light .glide__bullets > button:focus-visible {
    outline-color: #FFF;
}

/* Desktop menu: open a dropdown while one of its links has keyboard focus, as it opens on hover. */
@media (min-width: 992px) {
    .dropdown:focus-within > ul {
        display: block;
        z-index: 4;
    }
}

/* Mobile menu: the collapsed panel is only height: 0, so also hide it from the keyboard and screen readers.
   main.js adds nav.active before the panel opens and removes it after the panel has closed. */
@media (max-width: 991.98px) {
    nav:not(.active) .menu-cnt {
        visibility: hidden;
    }
}

/* Failsafe: main.js fades the template's full-screen #preloader out. If it never runs (blocked or failed script),
   hide the preloader after 4 seconds so the page is still readable. (Without JavaScript, <noscript> hides it at once.) */
#preloader {
    animation: sb-preloader-failsafe 0s 4s forwards;
}

@keyframes sb-preloader-failsafe {
    to {
        visibility: hidden;
        opacity: 0;
    }
}

/* Reduced motion: no Ken Burns zoom, reveal animations or transitions. (site.js also stops the hero headline rotation.) */
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* Legal sidebar entity box (boxed-area light = white text on navy): the template's default dark link colour
   is unreadable there, so links take the box's white text colour, underlined to read as links. */
.boxed-area.light .text-list p a {
    color: #FFF;
    text-decoration: underline;
}