@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Text:ital,wght@0,300..900;1,300..900&display=swap');

/* ===== COLOR THEME VARIABLES ===== */
/* For creating theme: https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/ */
:root {
    /* Core palette tokens */
    --themePrimary: #00bbd4;
    --themeLighterAlt: #f3fcfd;
    --themeLighter: #d0f3f8;
    --themeLight: #a9eaf2;
    --themeTertiary: #5cd5e5;
    --themeSecondary: #1ac3d9;
    --themeDarkAlt: #00a8be;
    --themeDark: #008ea1;
    --themeDarker: #006977;
    --neutralLighterAlt: #022428;
    --neutralLighter: #042c31;
    --neutralLight: #09393f;
    --neutralQuaternaryAlt: #0d4148;
    --neutralQuaternary: #11484f;
    --neutralTertiaryAlt: #26656d;
    --neutralTertiary: #d6e4e5;
    --neutralSecondary: #dce8ea;
    --neutralSecondaryAlt: var(--neutralSecondary);
    --neutralPrimaryAlt: #e3edee;
    --neutralPrimary: #c3d6d9;
    --neutralDark: #f1f6f6;
    --black: #f7fafa;
    --white: #001b1f;

    /* Semantic variables (fixed to None tone) */
    --sem-bodyBackground: var(--white);
    --sem-bodyFrameBackground: var(--white);
    --sem-buttonBackground: var(--white);
    --sem-primaryButtonText: var(--white);
    --sem-primaryButtonTextHovered: var(--white);
    --sem-primaryButtonTextPressed: var(--white);
    --sem-inputBackground: var(--white);
    --sem-inputForegroundChecked: var(--white);
    --sem-listBackground: var(--white);
    --sem-menuBackground: var(--white);
    --sem-inputIconHovered: var(--themeDark);
    --sem-linkHovered: var(--themeDarker);
    --sem-primaryButtonBackgroundHovered: var(--themeDarkAlt);
    --sem-inputPlaceholderBackgroundChecked: var(--themeLighter);
    --sem-bodyBackgroundChecked: var(--neutralLight);
    --sem-bodyFrameDivider: var(--neutralLight);
    --sem-bodyDivider: var(--neutralLight);
    --sem-variantBorder: var(--neutralLight);
    --sem-buttonBackgroundCheckedHovered: var(--neutralLight);
    --sem-buttonBackgroundPressed: var(--neutralLight);
    --sem-listItemBackgroundChecked: var(--neutralLight);
    --sem-listHeaderBackgroundPressed: var(--neutralLight);
    --sem-menuItemBackgroundPressed: var(--neutralLight);
    --sem-menuItemBackgroundChecked: var(--neutralLight);
    --sem-bodyBackgroundHovered: var(--neutralLighter);
    --sem-buttonBackgroundHovered: var(--neutralLighter);
    --sem-buttonBackgroundDisabled: var(--neutralLighter);
    --sem-buttonBorderDisabled: var(--neutralLighter);
    --sem-primaryButtonBackgroundDisabled: var(--neutralLighter);
    --sem-disabledBackground: var(--neutralLighter);
    --sem-listItemBackgroundHovered: var(--neutralLighter);
    --sem-listHeaderBackgroundHovered: var(--neutralLighter);
    --sem-menuItemBackgroundHovered: var(--neutralLighter);
    --sem-primaryButtonTextDisabled: var(--neutralQuaternary);
    --sem-disabledSubtext: var(--neutralQuaternary);
    --sem-listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
    --sem-disabledBodyText: var(--neutralTertiary);
    --sem-variantBorderHovered: var(--neutralTertiary);
    --sem-buttonTextDisabled: var(--neutralTertiary);
    --sem-inputIconDisabled: var(--neutralTertiary);
    --sem-disabledText: var(--neutralTertiary);
    --sem-bodyText: var(--neutralPrimary);
    --sem-actionLink: var(--neutralPrimary);
    --sem-buttonText: var(--neutralPrimary);
    --sem-inputBorderHovered: var(--neutralPrimary);
    --sem-inputText: var(--neutralPrimary);
    --sem-listText: var(--neutralPrimary);
    --sem-menuItemText: var(--neutralPrimary);
    --sem-bodyStandoutBackground: var(--neutralLighterAlt);
    --sem-defaultStateBackground: var(--neutralLighterAlt);
    --sem-actionLinkHovered: var(--neutralDark);
    --sem-buttonTextHovered: var(--neutralDark);
    --sem-buttonTextChecked: var(--neutralDark);
    --sem-buttonTextPressed: var(--neutralDark);
    --sem-inputTextHovered: var(--neutralDark);
    --sem-menuItemTextHovered: var(--neutralDark);
    --sem-bodySubtext: var(--neutralSecondary);
    --sem-focusBorder: var(--neutralSecondary);
    --sem-inputBorder: var(--neutralSecondary);
    --sem-smallInputBorder: var(--neutralSecondary);
    --sem-inputPlaceholderText: var(--neutralSecondary);
    --sem-buttonBorder: var(--neutralSecondaryAlt);
    --sem-disabledBodySubtext: var(--neutralTertiaryAlt);
    --sem-disabledBorder: var(--neutralTertiaryAlt);
    --sem-buttonBackgroundChecked: var(--neutralTertiaryAlt);
    --sem-menuDivider: var(--neutralTertiaryAlt);

    /* Semantic mappings */
    --color-bg: var(--sem-bodyBackground);
    --color-surface: var(--sem-bodyStandoutBackground);
    --color-surface-bg: rgba(2, 36, 40, 0.60);
    --color-surface-alt: var(--neutralLighter);
    --color-text: var(--neutralPrimary);
    --color-heading: var(--neutralDark);
    --color-muted: var(--neutralTertiary);
    --color-border: var(--sem-variantBorder);

    --color-primary: var(--themePrimary);
    --color-primary-hover: var(--themeSecondary);
    --color-primary-active: var(--themeDarkAlt);
    --color-on-primary: var(--black);

    /* Backward-compat highlight aliases */
    --color-highlight: var(--color-primary);
    --color-highlight-bg: rgba(0, 187, 212, 0.15);
    --color-highlight-bg2: rgba(0, 187, 212, 0.60);
    --color-focus: var(--sem-focusBorder);

    /* Status */
    --color-danger: #ef4444;
    --color-success: var(--themeTertiary);

    /* Layout */
    --radius: 0.5rem;
    --shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-pop: 0 2px 12px rgba(0, 0, 0, 0.10);
    --shadow-btn: 0 1px 5px 0 rgba(24, 24, 32, 0.05);
    --shadow-hover-strong: 0 4px 28px 0 rgba(0, 0, 0, 0.12);
    --transition: 0.18s cubic-bezier(.4, 0, .2, 1);
    /* Typography */
    --font-main: 'Red Hat Display', 'Segoe UI', sans-serif;
    /* Weight scale */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
    /* Back-compat aliases */
    --font-weight-header: var(--fw-semibold);
    --font-weight-body: var(--fw-regular);
    --font-weight-bold: var(--fw-bold);
    /* Sizes and rhythm */
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.2rem;
    --font-heading: 'Red Hat Display', Inter, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Red Hat Text', Inter, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    /* Back-compat main alias */
    --font-main: var(--font-body);
    --fs-h5: 0.98rem;
    --fs-h6: 0.92rem;
    --fs-body: 1rem;
    --ls-heading: 0.01em;
    --ls-body: 0.005em;
    --line-height-body: 1.6;

    /* Icon tint helpers (theme accent + on-accent/white) */
    --filter-icon-accent: invert(54%) sepia(24%) saturate(2261%) hue-rotate(140deg) brightness(98%) contrast(101%);
    --filter-icon-onAccent: brightness(0) invert(1);
}

/* ===== RESET & BASE ===== */
html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
}

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-optical-sizing: auto;
    line-height: var(--line-height-body);
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
}

/* Highlighted text selection color */
::selection {
    background: var(--color-highlight-bg);
    color: var(--color-on-primary);
}

::-moz-selection {
    background: var(--color-highlight-bg);
    color: var(--color-on-primary);
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
    font-family: var(--font-heading);
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: var(--font-weight-header);
    letter-spacing: var(--ls-heading);
}

h1 {
    font-size: var(--fs-h1);
    margin-bottom: 0.3em;
}

h2 {
    font-size: var(--fs-h2);
    margin-bottom: 0.25em;
}

h3 {
    font-size: var(--fs-h3);
    margin-bottom: 0.22em;
}

h4 {
    font-size: var(--fs-h4);
    margin-bottom: 0.18em;
}

h5 {
    font-size: var(--fs-h5);
    margin-bottom: 0.15em;
}

h6 {
    font-size: var(--fs-h6);
    margin-bottom: 0.12em;
}

p,
ul,
ol {
    font-size: var(--fs-body);
    color: var(--color-text);
    margin-bottom: 1.2em;
    font-weight: var(--font-weight-body);
    letter-spacing: var(--ls-body);
}

a {
    color: var(--color-highlight);
    text-decoration: none;
    position: relative;
    transition: color var(--transition);
    font-weight: var(--font-weight-body);
}

a:hover,
a:focus-visible {
    color: var(--sem-linkHovered);
}

strong,
b {
    color: var(--color-heading);
    font-weight: var(--font-weight-bold);
}

em,
i {
    color: var(--color-highlight);
    font-style: italic;
}

/* Animated underline effect */
.animated-link {
    color: var(--color-highlight);
    text-decoration: none;
    position: relative;
    font-weight: var(--font-weight-body);
    background: linear-gradient(0deg, var(--color-highlight), var(--color-highlight)) no-repeat right bottom / 0 2px;
    transition: background-size 350ms;
    padding-bottom: 2px;
    --bg-h: 2px;
}

.animated-link:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}

/* ===== BUTTONS ===== */
button {
    background: var(--color-primary);
    color: var(--sem-primaryButtonText);
    padding: 0.6em 1.2em;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-btn);
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

button:hover,
button:focus-visible {
    background: var(--sem-primaryButtonBackgroundHovered);
    color: var(--sem-primaryButtonTextHovered);
}

button:active {
    background: var(--sem-buttonBackgroundPressed);
    color: var(--sem-buttonTextPressed);
}

button:disabled {
    background: var(--sem-primaryButtonBackgroundDisabled);
    color: var(--sem-primaryButtonTextDisabled);
    cursor: not-allowed;
}

/* Move to top button */
.scroll-to-top-btn {
    background: var(--color-highlight-bg);
    color: var(--color-focus);
    border-radius: 50px;
    padding: 0.32em 0.7em;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    width: 44px;
    height: 44px;
}

.scroll-to-top-btn:hover,
.scroll-to-top-btn:focus-visible {
    background: var(--color-highlight);
    color: var(--color-heading);
}

.scroll-to-top-btn:hover .scroll-top-arrow,
.scroll-to-top-btn:focus-visible .scroll-top-arrow {
    filter: var(--filter-icon-onAccent);
}

.scroll-top-arrow {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
    filter: var(--filter-icon-accent);
    transition: filter 0.2s;
}

/* (Removed unused progress bar styles) */

/* ===== FORMS ===== */
input,
select,
textarea {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    padding: 0.5em 1em;
    margin-bottom: 1.2em;
    transition: border var(--transition), background var(--transition);
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-focus);
    border-color: var(--sem-inputBorderHovered);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--color-border);
    color: var(--color-muted);
}

/* (Removed unused card styles) */

/* ===== ACCESSIBILITY & STATES ===== */
[aria-current="page"],
.active {
    font-weight: var(--font-weight-bold);
    color: var(--color-highlight);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

::-webkit-scrollbar {
    width: 10px;
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface);
    border-radius: var(--radius);
}

/* ===== MAIN CONTENT MARGINS ===== */
main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 0;
    padding-top: 70px;
    padding-right: 0;
}

/* (Removed unused utility classes: muted, center, mt-2/mb-2, p-2, flex, flex-col, gap-2) */

/* ===== PAGE ANIMATION ===== */
.fade-in {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 0.7s cubic-bezier(.4, 0, .2, 1),
        transform 0.7s cubic-bezier(.4, 0, .2, 1);
    /* Remove persistent layer promotion that can cause text blur on some systems */
}

.fade-in.visible {
    opacity: 1;
    transform: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 900px) {
    main {
        width: 98%;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 56px;
        /* Reduce top padding for smaller navbar */
    }

    h1 {
        font-size: 1.4rem;
        margin-bottom: 0.22em;
    }

    h2 {
        font-size: 1.08rem;
        margin-bottom: 0.18em;
    }

    h3 {
        font-size: 1rem;
        margin-bottom: 0.15em;
    }

    .card {
        padding: 1rem;
        margin-bottom: 1.2rem;
    }

    p,
    ul,
    ol {
        font-size: 0.98rem;
        margin-bottom: 1em;
    }
}

@media (max-width: 600px) {
    main {
        width: 99%;
        max-width: 100%;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 44px;
    }

    h1 {
        font-size: 1.15rem;
        margin-bottom: 0.18em;
    }

    h2 {
        font-size: 0.98rem;
        margin-bottom: 0.13em;
    }

    h3 {
        font-size: 0.92rem;
        margin-bottom: 0.11em;
    }

    .card {
        padding: 0.5rem;
        margin-bottom: 0.7rem;
    }

    p,
    ul,
    ol {
        font-size: 0.95rem;
        margin-bottom: 0.8em;
    }
}

@media (max-width: 600px) {
    main {
        width: 98%;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card {
        padding: 0.7rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.2rem;
    }
}