/* accessibility css start here  */

.accessibility-toggle {
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    padding: 3px 8px;
    /* border-radius: 8px; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    height: 100%;
    font-size: 14px;
    background: var(--color-sky-50);
    color: var(--color-neutral-600);
}

.accessibility-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--color-neutral-600);
}

/* Accessibility panel */
.accessibility-panel {
    position: absolute;
    right: 0;
    background: var(--color-sky-50);
    border-radius: 8px;
    box-shadow: 0 0px 6px 0px var(--color-sky-200);
    width: 300px;
    display: none;
    z-index: 999;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--primary-dark);
}

.accessibility-btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-neutral-50);
}

.accessibility-btn button {
    padding: var(--space-2);
    font-size: var(--text-xs);
    height: 80px;
    cursor: pointer;
    background: var(--color-sky-100);
    color: var(--color-neutral-600);
    border-radius: 4px;
    border: none;
    box-shadow: 0 0px 4px 0px var(--color-sky-100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.accessibility-btn button:hover {
    border: 2px solid var(--primary-dark);
}

.accessibility-btn button img {
    max-height: 30px;
    max-width: 30px;
    margin-bottom: 10px;
}

.accessibility-btn button.active {
    border: 2px solid var(--primary-dark);
}

.accessibility-btn button.shrink-img img {
    max-height: 22px;
    max-width: 22px;
}

.accessibility-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--primary-dark); */
    color: var(--color-black);
    border-bottom: 1px solid var(--primary-dark);
    padding: 8px 16px;
}

.accessibility-header h5 {
    color: var(--color-sky-600);
    font-size: 20px;
    margin: 0;
}

.accessibility-header button {
    color: var(--color-navy-900);
    background-color: var(--color-sky-100);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accessibility-header button>svg {
    width: 18px;
    height: 18px;
}

.accessibility-container {
    min-height: 100vh;
}

.accessibility-footer {
    padding: 15px;
    border-top: 1px solid var(--primary-dark);
    /* background: var(--primary-dark); */
}

.accessibility-footer button {
    width: 100%;
    background-color: var(--color-sky-50);
    border-radius: 5px;
    padding: 12px 15px;
    color: var(--color-sky-500);
    font-size: 13px;
    letter-spacing: 0.4px;
    border: none;
    outline: none;
}

/* Accessibility styles (to be toggled) */

/* High contrast: override utility.css color palette (light <-> dark) */
body.high-contrast {
    /* Neutral scale inverted: white -> black, black -> white */

    /* Sky-blue brand — invert intensity for high contrast on dark bg */
    --primary: #7dd3fc;
    --primary-solid: #7dd3fc;
    --primary-dark: #bae6fd;
    --primary-darker: #e0f2fe;
    --primary-light: #38bdf8;
    --primary-lighter: #0ea5e9;
    --primary-contrast: #000000;

    --color-sky-50: #082f41;
    --color-sky-100: #0e4f6c;
    --color-sky-200: #156f97;
    --color-sky-300: #1a8fbf;
    --color-sky-400: #2aa9e0;
    --color-sky-500: #44b3e3;
    --color-sky-600: #62bee8;
    --color-sky-700: #9fd6f0;
    --color-sky-800: #cfeaf7;
    --color-sky-900: #ebf6fc;

    --primary-alpha-10: #7dd3fc1a;
    --primary-alpha-20: #7dd3fc33;
    --primary-alpha-40: #7dd3fc66;
    --primary-alpha-60: #7dd3fc99;
    --primary-alpha-80: #7dd3fccc;

    --a11y-primary: #7dd3fc;
    --a11y-primary-strong: #e0f2fe;
    --a11y-primary-on-dark: #bae6fd;
    --a11y-link: #7dd3fc;
    --a11y-link-hover: #e0f2fe;
    --a11y-focus-ring: #ffff00;
    --a11y-bg-tint: #0e4f6c;
    --a11y-bg-strong: #ebf6fc;

    --color-cream-50: #0e4f6c;
    --color-warm-500: #7dd3fc;
    --color-warm-700: #bae6fd;

    --color-neutral-0: #000000;
    --color-neutral-50: #0a0a0a;
    --color-neutral-100: #141414;
    --color-neutral-200: #1a1a1a;
    --color-neutral-300: #2b2b2b;
    --color-neutral-400: #5c5c5c;
    --color-neutral-500: #8c8c8c;
    --color-neutral-600: #adadad;
    --color-neutral-700: #bfbfbf;
    --color-neutral-800: #d9d9d9;
    --color-neutral-900: #e8e8e8;
    --color-neutral-950: #ffffff;
    /* Primary: dark for contrast on light, light on dark */
    --color-primary-50: #0c4a6e;
    --color-primary-100: #075985;
    --color-primary-200: #0369a1;
    --color-primary-300: #0284c7;
    --color-primary-400: #0ea5e9;
    --color-primary-500: #38bdf8;
    --color-primary-600: #7dd3fc;
    --color-primary-700: #bae6fd;
    --color-primary-800: #e0f2fe;
    --color-primary-900: #f0f9ff;
    /* Secondary */
    --color-secondary-50: #581c87;
    --color-secondary-100: #6b21a8;
    --color-secondary-200: #7e22ce;
    --color-secondary-300: #9333ea;
    --color-secondary-400: #a855f7;
    --color-secondary-500: #c084fc;
    --color-secondary-600: #d8b4fe;
    --color-secondary-700: #e9d5ff;
    --color-secondary-800: #f3e8ff;
    --color-secondary-900: #faf5ff;
    /* Accent (Gold) - keep visible for buttons/CTAs */
    --color-accent-50: #78350f;
    --color-accent-100: #92400e;
    --color-accent-200: #b45309;
    --color-accent-300: #d97706;
    --color-accent-400: #f59e0b;
    --color-accent-500: #fbbf24;
    --color-accent-600: #fcd34d;
    --color-accent-700: #fde68a;
    --color-accent-800: #fef3c7;
    --color-accent-900: #fffbeb;
    /* Gold & Navy theme */
    --color-gold-50: #6b4d30;
    --color-gold-100: #8c6640;
    --color-gold-200: #b08050;
    --color-gold-300: #c4956a;
    --color-gold-400: #d4a574;
    --color-gold-500: #e0b588;
    --color-gold-600: #e8c5a0;
    --color-gold-700: #f2dcc5;
    --color-gold-800: #f9efe3;
    --color-gold-900: #fdf8f3;
    --color-navy-50: #12121f;
    --color-navy-100: #1a1a2e;
    --color-navy-200: #232338;
    --color-navy-300: #2d2d44;
    --color-navy-400: #3a3a54;
    --color-navy-500: #565672;
    --color-navy-600: #75758a;
    --color-navy-700: #9d9dac;
    --color-navy-800: #c5c5ce;
    --color-navy-900: #e8e8ec;
    /* Semantic (high-contrast friendly) */
    --color-success-50: #0d3318;
    --color-success-500: #22c55e;
    --color-success-600: #4ade80;
    --color-warning-50: #422006;
    --color-warning-500: #fbbf24;
    --color-warning-600: #fcd34d;
    --color-error-50: #450a0a;
    --color-error-500: #f87171;
    --color-error-600: #fca5a5;
    --color-info-50: #172554;
    --color-info-500: #60a5fa;
    --color-info-600: #93c5fd;
    /* Theme vars so backgrounds and text use contrast */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --bg-inverse: #e8e8e8;
    --text-primary: #ffffff;
    --text-secondary: #bfbfbf;
    --text-tertiary: #8c8c8c;
    --text-inverse: #000000;
    --text-link: #7dd3fc;
    --border-default: #2b2b2b;
    --border-muted: #1a1a1a;
    --border-strong: #5c5c5c;
    --surface-elevated: #0a0a0a;
    --body-color: #000000;
    --text-color: #ffffff;
    --button-color: #ffff00;
}

.high-contrast {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.high-contrast :where(.hm-htl-box-otr) {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* .high-contrast :where(.h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    label,
    span,
    a,
    a:focus,
    a:hover) {
    color: var(--text-primary) !important;
}

.high-contrast :where(nav.navbar .top-navbar .menu--bar .top--header .top--menu svg line) {
    fill: var(--text-primary) !important;
    stroke: var(--text-primary) !important;
}

.high-contrast :where(p.description, p, .description) {
    color: var(--text-primary) !important;
}

.high-contrast :where(.btn-primary, .btn-primary a) {
    color: var(--bg-primary) !important;
    background-color: var(--button-color) !important;
}

.high-contrast :where(.btn-primary svg path) {
    stroke: var(--bg-primary) !important;
}

.high-contrast :where(.btn-primary.btn-stock svg path) {
    stroke: var(--button-color) !important;
}

.high-contrast :where(.btn-primary.btn-stock) {
    background: transparent !important;
    border: 1px solid var(--button-color) !important;
    color: var(--button-color) !important;
}

.high-contrast :where(.btn-primary.btn-stock a) {
    background: transparent !important;
    color: var(--button-color) !important;
}

.high-contrast :where(.btn-primary.btn-stock:hover a, .btn-primary.btn-stock:hover svg path) {
    background-color: var(--button-color) !important;
    color: var(--bg-primary) !important;
    stroke: var(--bg-primary) !important;
}

.high-contrast :where(footer .ftr-main) {
    background: var(--bg-primary) !important;
}

.high-contrast :where(footer .ftr-main .foor-content .foor-content-body.socialized .footer-social .social--icon) {
    background: var(--button-color) !important;
}

.high-contrast :where(footer .ftr-main .foor-content .foor-content-body.socialized .footer-social .social--icon svg path) {
    stroke: var(--bg-primary);
} */

/* Large font - scale body so all em-based typography (utility.css --text-*) scales */
body.large-font {
    font-size: 1.25em;
}



/* large cursor */
.large-cursor,
.large-cursor button,
.large-cursor a {
    cursor: url("../img/cursor.png") 4 4,
        auto !important;
}

/* highlight link */
.highlight-link a {
    background-color: #000 !important;
    color: #ffff00 !important;
}

.highlight-link .logo a,
.highlight-link .lite-logo,
.highlight-link .mobile-menu-logo {
    background-color: transparent !important;
    color: inherit !important;
}

.high-contrast.highlight-link .btn-primary a {
    color: var(--bg-primary) !important;
}

.high-contrast.highlight-link .btn-primary.btn-stock a {
    color: var(--button-color) !important;
}

.high-contrast.highlight-link .btn-primary.btn-stock::before {
    background: var(--text-primary) !important;
}

.high-contrast.highlight-link .btn-primary.btn-stock:hover a {
    color: var(--bg-primary) !important;
}

@media all and (max-width:575px) {
    .accessibility-panel {
        right: -90px;
        width: 250px;
    }

    .accessibility-header,
    .accessibility-btn,
    .accessibility-footer {
        padding: 12px;
    }

    .accessibility-header h5 {
        font-size: 16px;
    }

    .accessibility-header button {
        height: 24px;
        width: 24px;
    }

    .accessibility-header button>svg {
        width: 14px;
        height: 14px;
    }

    .accessibility-btn {
        gap: 12px;
    }

    .accessibility-btn button {
        font-size: 12px;
        gap: 8px;
    }

    .accessibility-footer button {
        font-size: 12px;
        padding: 8px;
    }

    .accessibility-btn button>svg {
        width: 16px;
        height: 16px;
    }
}