:root {
    --mdb-btn-bg: transparent;
    --mdb-btn-color: #34495e;
    --mdb-btn-hover-bg: transparent;
    --mdb-btn-hover-color: #658cb4;
    --mdb-btn-focus-bg: transparent;
    --mdb-btn-focus-color: #658cb4;
    --mdb-btn-active-bg: transparent;
    --mdb-btn-active-color: #658cb4;
    --mdb-btn-border-color: #34495e;
    --mdb-btn-focus-border-color: #34495e;
    --mdb-btn-hover-border-color: #34495e;
}


.navbar {
    background-color: #34495e !important;
    font-family: "Red Hat Display", Verdana, sans-serif !important;
    border-bottom: 1px solid white;
}

body {
    font-family: "Red Hat Text", Verdana, sans-serif !important;
}

h1, h2, h3, h4, h5 {
    font-family: "Red Hat Display", Verdana, sans-serif !important;
}

body {
    font-size: 1.2em;
}

.navbar a {
    color: white !important;
}

.content {
    min-height: 10vh;
    padding: 20px;
}

.ui-slider-range {
    background-color: #34495e !important;
    background-image: none !important;

}

.btn-primary, .btn-outline-primary {
    --mdb-btn-bg: #34495e; /* base: dark slate blue */
    --mdb-btn-color: #fff;
    --mdb-btn-box-shadow: 0 4px 12px -4px rgba(52, 73, 94, 0.6); /* more pronounced base shadow */

    --mdb-btn-hover-bg: #5b7ea3; /* brighter blue-gray on hover */
    --mdb-btn-hover-color: #fff;

    --mdb-btn-focus-bg: #5b7ea3;
    --mdb-btn-focus-color: #fff;

    --mdb-btn-active-bg: #2c3e50; /* darker on click */
    --mdb-btn-active-color: #fff;

    --mdb-btn-box-shadow-state: 0 10px 15px -5px rgba(91, 126, 163, 0.5), /* hover/focus */ 0 6px 20px 0 rgba(91, 126, 163, 0.4);

    background-image: none !important;
}

.btn-outline-primary {
    --mdb-btn-color: #34495e; /* base: dark slate blue */
    --mdb-btn-bg: #fff;
    border-color: #34495e;
}

.sidenav-static {
    position: relative !important;
    width: 310px;
    height: 100%;
    min-height: 1200px;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    visibility: visible !important;
    overflow-y: auto;
    flex-shrink: 0;
    margin-left: 10px !important;
}

@media only screen and (max-width: 720px) {
    .sidenav-static {
        width: 100%;
        height: initial;
        min-height: 0px;
        box-sizing: border-box !important;
        padding-right: 30px !important;
    }
    #content-container {
        display: block !important;
    }

}

#content, .content {
    padding-left: .75in !important;
}

@media only screen and (max-width: 720px) {
    #content, .content {
        padding-left: .2in !important;
    }
}

.progress-trial {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-weight: bold;
    color: #606060;
    margin-top: 0px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: "Red Hat Text", Verdana, Arial, sans-serif;
}

.progress-section {
    font-size: 14pt;
    font-weight: 500;
    text-align: center;
    /*border-top: 2px solid #606060;
    border-bottom: 2px solid #606060;*/
    color: white;
    background-color: #34495e;
    padding: 5px;
    margin-right: -12px;
}

.progress-container {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-top: 0px;
}


.progress-block {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: #606060;
    margin-top: 5px;
    margin-left: 10px;
    padding-right: 5px;
    font-weight: 600;
}

.progress-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 5px;
    margin-left: 25px;
}

.progress-item-current {
    font-weight: 600;
    color: #333333;
    background-color: #0479a81f;
    border-left: 5px solid #34495e;
    margin-left: -10px;
    padding-left: 40px;
    margin-right: -10px;
    padding-right: 15px;

}

.progress-trial-label {

}

.progress-label {
    font-size: 11pt;
}

.nav-link,
.sidenav a {
    color: rgb(79, 79, 79);
    cursor: pointer;
    text-decoration: underline;
}

.nav-link svg {
    color: #333333;
}

.progress-item:has(.nav-link:hover) {
    background-color: #F7F7F7;
    font-size: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: bold !important;
    color: #0479a8 !important;
}

.progress-trial:has(a:hover) {
    background-color: #F7F7F7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/*
.progress-item:hover {
    border: 1px solid #606060;
    box-shadow: 5px 5px 5px #606060;
}
*/

.progress-label svg {
    height: 30px;
    width: 30px;
    margin-right: 6px;
}

.feature-definition {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 1rem auto;
    font-size: 18px !important;
    font-style: italic;
}

.progress-label-current {
    margin-left: -40px;
    padding-left: 35px;
}

.status-icon {
    font-size: 18pt;
}

.status-not-started {
    color: rgba(52, 73, 94, 0.4)
}

.status-in-progress {
    color: rgba(52, 73, 94, 0.7)

}

.status-complete {
    color: #34495e;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

#page-wrapper {
    width: 100%;
    max-width: 100vw;
}

.content {
    /*flex: 1 0 auto;*/
}

.footer {
    flex-shrink: 0;
    border-top: 1px solid #00000022;
}

.sidenav-item {
    width: 100%;
}

#progress-bar .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.status-complete {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

.scales-container-non-global {
    border: 5px solid !important;
    margin-top: .5in;
}


.domain-0-title, .progress-item-current .progress-label-0 {
    color: #34495e !important
}

/* Steel Blue */
.domain-1-title, .feature-52-title, .progress-item-current .progress-label-1 {
    color: #303F9F !important
}

/* Dark Blue */
.domain-2-title, .feature-43-title, .progress-item-current .progress-label-2 {
    color: #1976D2 !important
}

/* Vibrant Coral */
.domain-6-title, .feature-45-title, .progress-item-current .progress-label-6 {
    color: #6D4C41 !important
}

/* Deep Orange */
.domain-5-title, .feature-42-title, .progress-item-current .progress-label-5 {
    color: #2E7D32 !important
}

/* Forest Green */
.domain-4-title, .feature-47-title, .progress-item-current .progress-label-4 {
    color: #D81B60 !important
}

/* Dark Purple */
.domain-10-title, .progress-item-current .progress-label-10 {
    color: #880E4F !important
}

/* Deep Indigo */
.domain-7-title, .feature-46-title, .progress-item-current .progress-label-7 {
    color: #D15B00 !important
}

/* Raspberry pink */
.domain-8-title, .feature-44-title, .progress-item-current .progress-label-8 {
    color: #6A1B9A !important
}

/* Dark Teal */
.domain-9-title, .feature-41-title, .progress-item-current .progress-label-9 {
    color: #0097A7 !important
}

/* Dark Red */
.domain-3-title, .feature-48-title, .progress-item-current .progress-label-3 {
    color: #D32F2F !important
}

/* Cyan */

.feature-49-title, .feature-50-title, .feature-51-title {
    color: #880E4F
}


.domain-0-accent-line {
    color: #34495e;
    border-top: 4px solid #34495e;
}

/* Steel Blue */
.domain-1-accent-line {
    color: #303F9F;
    border-top: 4px solid #303F9F;
}

/* Dark Blue */
.domain-2-accent-line {
    color: #1976D2;
    border-top: 4px solid #1976D2;
}

/* Vibrant Coral */
.domain-6-accent-line {
    color: #6D4C41;
    border-top: 4px solid #6D4C41;
}

/* Deep Orange */
.domain-5-accent-line {
    color: #2E7D32;
    border-top: 4px solid #2E7D32;
}

/* Forest Green */
.domain-4-accent-line {
    color: #D81B60;
    border-top: 4px solid #D81B60;
}

/* Dark Purple */
.domain-10-accent-line {
    color: #880E4F;
    border-top: 4px solid #880E4F;
}

/* Deep Indigo */
.domain-7-accent-line {
    color: #D15B00;
    border-top: 4px solid #D15B00;
}

/* Raspberry pink */
.domain-8-accent-line {
    color: #6A1B9A;
    border-top: 4px solid #6A1B9A;
}

/* Dark Teal */
.domain-9-accent-line {
    color: #0097A7;
    border-top: 4px solid #0097A7;
}

/* Dark Red */
.domain-3-accent-line {
    color: #D32F2F;
    border-top: 4px solid #D32F2F;
}

/* Cyan */


.domain-1-card, .domain-resonance-card, .progress-item-current.domain-1-progress {
    border-color: #303F9F !important;
    background-color: #303F9F0d;
}

/* Dark Blue */
.domain-2-card, .domain-prosody-card, .progress-item-current.domain-2-progress {
    border-color: #1976D2 !important;
    background-color: #1976D20d;
}

/* Vibrant Coral */
.domain-6-card, .domain-voice-quality-card, .progress-item-current.domain-6-progress {
    border-color: #6D4C41 !important;
    background-color: #6D4C410d; /* Deep Orange */
}

.domain-5-card, .domain-speech-rate-card, .progress-item-current.domain-5-progress {
    border-color: #2E7D32 !important;
    background-color: #2E7D320d;
}

/* Forest Green */
.domain-4-card, .domain-voice-stability-card, .progress-item-current.domain-4-progress {
    border-color: #D81B60 !important;
    background-color: #D81B600d;
}

/* Dark Purple */
.domain-10-card, .progress-item-current.domain-10-progress {
    border-color: #880E4F !important;
    background-color: #880E4F0d;
}

/* Deep Indigo */
.domain-7-card, .domain-loudness-card, .domain-loudness-pitch-card, .progress-item-current.domain-7-progress {
    border-color: #D15B00 !important;
    background-color: #D15B000d;
}

/* Raspberry pink */
.domain-8-card, .domain-speech-breathing-card, .progress-item-current.domain-8-progress {
    border-color: #6A1B9A !important;
    background-color: #6A1B9A0d;
}

/* Dark Teal */
.domain-9-card, .domain-speech-fluency-card, .progress-item-current.domain-9-progress {
    border-color: #0097A7 !important;
    background-color: #0097A70d;
}

/* Dark Red */
.domain-3-card, .domain-articulation-card, .progress-item-current.domain-3-progress {
    border-color: #D32F2F !important;
    background-color: #D32F2F0d; /* Cyan */
}


.domain-speech-intelligibility-card, .domain-speech-naturalness-card, .domain-communication-effectiveness-card {
    border-color: #880E4F !important;
    background-color: #880E4F0d;
}

.domain-loudness-card svg, .domain-loudness-pitch-card svg {
    color: #D15B00
}

.domain-speech-fluency-card svg {
    color: #0097A7
}

.domain-speech-rate-card svg {
    color: #2E7D32
}

.domain-prosody-card svg {
    color: #1976D2
}

.domain-speech-breathing-card svg {
    color: #6A1B9A
}

.domain-voice-quality-card svg {
    color: #6D4C41
}

.domain-voice-stability-card svg {
    color: #D81B60
}

.domain-articulation-card svg {
    color: #D32F2F
}

.domain-resonance-card svg {
    color: #303F9F
}

.domain-functional-communication-card svg {
    color: #880E4F
}

.domain-listen-card svg {
    color: #455A64
}


@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText/RedHatText-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay/RedHatDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Base layout for each hero block */
.side-hero {
    padding: 3rem 1rem;
}

.side-hero-inner {
    max-width: 1100px;
    margin: 0 auto 3rem;
    border-radius: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
    overflow: hidden;
    position: relative;
}

/* Main vs aside panels */
.side-hero-main,
.side-hero-aside {
    position: relative;
    padding: 2.5rem 2.5rem;
}

/* Direction: text left, image right */
.side-hero--left .side-hero-main {
    order: 0;
}
.side-hero--left .side-hero-aside {
    order: 1;
}

/* Direction: text right, image left */
.side-hero--right .side-hero-main {
    order: 1;
}
.side-hero--right .side-hero-aside {
    order: 0;
}

/* Color schemes */
.side-hero--blue .side-hero-main {
    background: #e0ecf4;      /* light blue */
}
.side-hero--blue .side-hero-aside {
    background: #ffffff;
}

.side-hero--white .side-hero-main {
    background: #ffffff;
}
.side-hero--white .side-hero-aside {
    background: #e0ecf4;
}

/* Curved divider: when aside is on the right */
.side-hero--left .side-hero-aside::before {
    content: "";
    position: absolute;
    left: -80px;              /* how far it intrudes into the main panel */
    top: -20%;
    width: 160px;
    height: 140%;
    background: inherit;      /* match the aside background */
    border-radius: 50%;
}

/* Curved divider: when aside is on the left (mirror) */
.side-hero--right .side-hero-aside::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -20%;
    width: 160px;
    height: 140%;
    background: inherit;
    border-radius: 50%;
}

/* Keep images centered/nicely sized */
.side-hero-aside img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive stacking */
@media (max-width: 768px) {
    .side-hero-inner {
        grid-template-columns: 1fr;
    }

    /* Optional: hide the curve on narrow screens */
    .side-hero-aside::before {
        display: none;
    }

    .side-hero-main,
    .side-hero-aside {
        padding: 1.75rem 1.5rem;
    }
}


.accordion-button {
    font-size: 24px !important;
}

.accordion-body {
    padding-left: 30px;
    padding-right: 30px;
}

/* Footer Container */
.footer {
    background-color: #f8f8f8;
    font-size: 0.95rem;
    color: #282728;
}

/* List Resets */
ul.uw-contact-list,
ul.uw-social-icons {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

/* Social Icons */
.uw-social-icons li {
    display: inline-block;
    margin-right: 0.5rem;
}

.uw-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #e2e2e2;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.uw-social-icons a:hover {
    background-color: #c5050c; /* UW Red hover effect */
}

.uw-social-icons svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: #282728;
}

.uw-social-icons a:hover svg {
    fill: #ffffff;
}

/* Logo Styling */
.uw-logo-link-wrapper svg {
    width: 100%;
    max-width: 250px;
    height: auto;
}

.uw-footer-header {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stand out link under logo */
.uw-footer-stand-out-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #495057;
}

.uw-footer-stand-out-link:hover {
    color: #c5050c;
    text-decoration: underline;
}
.uw-contact-address {
    font-size: 1.0rem;
}