/* ==========================
   ACCESSIBILITY WIDGET
========================== */

#a11y-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}


#a11y-toggle {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 26px;

    background: var(--secondary);
    color: var(--primary);

    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}


#a11y-panel {

    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-bottom: 10px;
    padding: 15px;

    background: white;

    border-radius: 10px;

    box-shadow: 0 0 20px rgba(0,0,0,.2);
}

#a11y-panel[hidden] {
    display: none;
}


#a11y-panel button {

    padding: 10px;
    cursor: pointer;

}


/* ==========================
   ENHANCED HIGH CONTRAST
========================== */

body.high-contrast {

    background: #ffffff;
    color: #111111;

}


/* Main text */

body.high-contrast p,
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3 {

    color: #111111;

}


/* Links */

body.high-contrast a {

    color: #0033cc;
    text-decoration: underline;

}


/* Cards */

body.high-contrast .service-card,
body.high-contrast .project-card,
body.high-contrast .card,
body.high-contrast .info-box {

    background: #ffffff;
    border: 2px solid #111111;

}


/* Buttons inside website only */

body.high-contrast main .btn {

    background: #111111;
    color: #ffffff;

}


/* Images */

body.high-contrast img {

    filter: contrast(1.15);

}


/* ==========================
   DARK MODE
========================== */

body.dark-mode {

    background: #222;
    color: #eee;

}


body.dark-mode .service-card,
body.dark-mode .project-card,
body.dark-mode .card,
body.dark-mode .info-box {

    background: #333;
    color: #eee;

}


body.dark-mode a {

    color: #8ab4ff;

}


/* ==========================
   UNDERLINE LINKS
========================== */

body.underline-links a {

    text-decoration: underline !important;

}