@font-face {
    font-family: 'peyda';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/woff/PeydaWeb-Regular.woff') format('woff'),
    url('../fonts/woff2/PeydaWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'peyda';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/woff/PeydaWeb-Medium.woff') format('woff'),
    url('../fonts/woff2/PeydaWeb-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'peyda';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/woff/PeydaWeb-Bold.woff') format('woff'),
    url('../fonts/woff2/PeydaWeb-Bold.woff2') format('woff2');
}

/* Design tokens: Light mode */
:root {
    /* Brand and state */
    --color-primary: #2635D9;
    --color-on-primary: #FFFFFF;
    --color-secondary: #FA8100;
    --color-on-secondary: #FFFFFF;
    --color-confirm: #1E7B22;
    --color-on-confirm: #FFFFFF;
    --color-error: #B01111;
    --color-on-error: #FFFFFF;

    /* Containers */
    --color-primary-container: #F2F7FD;
    --color-on-primary-container: #1F2AAD;
    --color-primary-container-2: #DCEBF9;
    --color-on-primary-container-2: #0F1557;

    --color-secondary-container: #FFF3E5;
    --color-on-secondary-container: #031C0D;
    --color-secondary-container-2: #FFE6CC;
    --color-on-secondary-container-2: #231200;

    --color-confirm-container: #D8F3E3;
    --color-on-confirm-container: #173F03;
    --color-confirm-container-2: #E8FCF0;
    --color-on-confirm-container-2: #031C0D;

    --color-error-container: #FBE5E4;
    --color-on-error-container: #520400;
    --color-error-container-2: #FFDBD9;
    --color-on-error-container-2: #2B0200;

    /* Surfaces and text */
    --color-surface: #FFFFFF;
    --color-on-surface: #323234;
    --color-surface-container-1: #FAFAFA;
    --color-on-surface-1: #62636A;
    --color-surface-container-2: #F4F4F5;
    --color-on-surface-2: #95969D;
    --color-surface-container-3: #D6D6D6;
    --color-on-surface-3: #ACACB2;
    --color-surface-container-4: #01041F;
    --color-on-surface-4: #E2E2E2;
    --color-surface-container-dark: #01041F;
    --color-on-surface-light: #FFFFFF;
    --color-disabled-surface: #E4E5E7;
    --color-on-disabled: #7A7B85;

    /* Borders */
    --color-outline: #F4F4F5;
    --color-outline-1: #E4E5E7;
    --color-outline-2: #CACACE;
    --color-outline-3: #E1E1E7;
    --color-outline-4: #C4C4C4;
    --color-outline-dark: #0F1557;
    --color-outline-disabled: #DBDBDB;

    /* Base */
    --color-white: #FFFFFF;
    --color-black: #000000;
}

/* Dark mode tokens (manual override) */
:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
    color-scheme: dark;

    /* Brand and state */
    --color-primary: #3176FF;
    --color-on-primary: #FFFFFF;
    --color-secondary: #FA8100;
    --color-on-secondary: #FFFFFF;
    --color-confirm: #1E7B22;
    --color-on-confirm: #FFFFFF;
    --color-error: #B01111;
    --color-on-error: #FFFFFF;

    /* Containers */
    --color-primary-container: #121319;
    --color-on-primary-container: #7BA7FF;
    --color-primary-container-2: #1C213C;
    --color-on-primary-container-2: #E8EAFC;

    --color-secondary-container: #24201C;
    --color-on-secondary-container: #E8D5C1;
    --color-secondary-container-2: #1E1914;
    --color-on-secondary-container-2: #F2E9E0;

    --color-confirm-container: #242B27;
    --color-on-confirm-container:#D2E6C7;
    --color-confirm-container-2:#131B16;
    --color-on-confirm-container-2:#DFF6E8;

    --color-error-container:#282121;
    --color-on-error-container:#F1D3D2;
    --color-error-container-2: #211717;
    --color-on-error-container-2:#F6E8E7;

    /* Surfaces and text */
    --color-surface: #0E0F12;
    --color-on-surface: #E9E9F2;
    --color-surface-container-1: #1A1C21;
    --color-on-surface-1: #D9DAE7;
    --color-surface-container-2: #22252D;
    --color-on-surface-2: #CBCDD5;
    --color-surface-container-3: #2C2F39;
    --color-on-surface-3: #ACACB2;
    --color-surface-container-4: #D7EAFF;
    --color-on-surface-4: #88888E;
    --color-surface-container-dark: #191B25;
    --color-on-surface-light: #FEFEFE;
    --color-disabled-surface: #3D3D3E;
    --color-on-disabled: #7A7B85;

    /* Borders */
    --color-outline: #1E1E20;
    --color-outline-1: #29292C;
    --color-outline-2: #3C3C41;
    --color-outline-3: #4B4B51;
    --color-outline-4: #5E5E65;
    --color-outline-dark: #242942;
    --color-outline-disabled: #4C4C4C;

    /* Base */
    --color-white: #FFFFFF;
    --color-black: #000000;
}

/* Dark mode tokens (system preference) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

    /* Brand and state */
    --color-primary: #3176FF;
    --color-on-primary: #FFFFFF;
    --color-secondary: #FA8100;
    --color-on-secondary: #FFFFFF;
    --color-confirm: #1E7B22;
    --color-on-confirm: #FFFFFF;
    --color-error: #B01111;
    --color-on-error: #FFFFFF;

    /* Containers */
    --color-primary-container: #121319;
    --color-on-primary-container: #7BA7FF;
    --color-primary-container-2: #1C213C;
    --color-on-primary-container-2: #E8EAFC;

    --color-secondary-container: #24201C;
    --color-on-secondary-container: #E8D5C1;
    --color-secondary-container-2: #1E1914;
    --color-on-secondary-container-2: #F2E9E0;

    --color-confirm-container: #242B27;
    --color-on-confirm-container:#D2E6C7;
    --color-confirm-container-2:#131B16;
    --color-on-confirm-container-2:#DFF6E8;

    --color-error-container:#282121;
    --color-on-error-container:#F1D3D2;
    --color-error-container-2: #211717;
    --color-on-error-container-2:#F6E8E7;

    /* Surfaces and text */
    --color-surface: #0E0F12;
    --color-on-surface: #E9E9F2;
    --color-surface-container-1: #1A1C21;
    --color-on-surface-1: #D9DAE7;
    --color-surface-container-2: #22252D;
    --color-on-surface-2: #CBCDD5;
    --color-surface-container-3: #2C2F39;
    --color-on-surface-3: #ACACB2;
    --color-surface-container-4: #D7EAFF;
    --color-on-surface-4: #88888E;
    --color-surface-container-dark: #191B25;
    --color-on-surface-light: #FEFEFE;
    --color-disabled-surface: #3D3D3E;
    --color-on-disabled: #7A7B85;

    /* Borders */
    --color-outline: #1E1E20;
    --color-outline-1: #29292C;
    --color-outline-2: #3C3C41;
    --color-outline-3: #4B4B51;
    --color-outline-4: #5E5E65;
    --color-outline-dark: #242942;
    --color-outline-disabled: #4C4C4C;

    /* Base */
    --color-white: #FFFFFF;
    --color-black: #000000;
    }
}

body {
    font-family: 'peyda', sans-serif;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
}

/* Disable all transitions briefly during theme switch */
body.theme-no-transition *,
body.theme-no-transition *::before,
body.theme-no-transition *::after {
    transition: none !important;
    animation: none !important;
}

/* Force on-surface color for specific inline SVG icon wrappers */
.icon-on-surface svg [fill]:not([fill="none"]) {
    fill: var(--color-on-surface) !important;
}

.icon-on-surface svg [stroke]:not([stroke="none"]) {
    stroke: var(--color-on-surface) !important;
}

/* WordPress menu styles */
.wordpress-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wordpress-menu-container .current-menu-item > div > div > span,
.wordpress-menu-container .current-menu-item > a {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.wordpress-menu-container .submenu-list {
    transition: max-height 0.5s ease-in-out;
}

.menu-scroll::-webkit-scrollbar {
    width: 18px;
    background-color: var(--color-surface-container-1);
}

.menu-scroll::-webkit-scrollbar-track {
    background-color: var(--color-surface-container-1);
    border-top: 1px solid var(--color-outline);
    border-bottom: 1px solid var(--color-outline);
    border-right: 1px solid var(--color-outline);
    margin-bottom: 1px;
    border-bottom-left-radius: 0.5rem;
    background-image: linear-gradient(to right, transparent 8px, var(--color-outline) 8px, var(--color-outline) 10px, transparent 10px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% calc(100% - 10px);
}

.menu-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: padding-box;
}

/* Progress Bar Styles */
.progress-container {
    display: flex;
    align-items: center;
}

.progress-bar {
    width: 0;
    transition: width 0.2s ease-in-out;
}

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

/* Remove bottom border when progress bar is present */
.single header {
    border-bottom: none;
}