@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

html,
body,
body *,
button,
input,
select,
textarea,
optgroup {
    font-family: 'Montserrat' !important;
}

html {
    font-synthesis: none;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    overflow-wrap: normal;
}

@keyframes pageLoaderRoll {
    to { transform: rotate(360deg); }
}

#page-transition-loader {
    align-items: center;
    background: rgb(2 6 23 / 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 220ms ease, visibility 220ms ease;
    visibility: hidden;
    z-index: 12001;
}

#page-transition-loader.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.page-transition-card {
    align-items: center;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: linear-gradient(135deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.08));
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 1.75rem;
    box-shadow: 0 24px 80px rgb(2 6 23 / 0.35), inset 0 1px 1px rgb(255 255 255 / 0.35);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.5rem 2rem;
}

.page-transition-logo {
    height: 3.5rem;
    object-fit: contain;
    width: 3.5rem;
}

.page-transition-spinner {
    animation: pageLoaderRoll 900ms linear infinite;
    height: 1.75rem;
    width: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
    #page-transition-loader,
    .page-transition-logo,
    .page-transition-spinner {
        animation: none;
        transition: none;
    }
}

/* Status pills and compact badges must stay readable as single labels. */
:is(.rounded-full, .status-badge, .exam-status-badge, span[class*='rounded-lg']) {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Keep browser-only controls out of the installed app shell. */
.web-only-banner {
    display: block;
}

.bottom-app-nav {
    display: none;
}

.standalone-app-tab {
    justify-content: center;
    text-align: center;
}

@media (max-width: 767px) {
    #main-content-area {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    #main-content-area > * {
        max-width: 100%;
        min-width: 0;
    }

    #main-content-area .p-6 {
        padding: 1rem;
    }

    #main-content-area .p-8 {
        padding: 1.25rem;
    }
}

@keyframes standaloneNavGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    html,
    body {
        min-height: 100%;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .web-only-banner {
        display: none !important;
    }

    .bottom-app-nav {
        display: flex !important;
        padding-bottom: max(.5rem, env(safe-area-inset-bottom));
        background: linear-gradient(115deg, rgb(219 234 254 / 0.46), rgb(254 226 226 / 0.4), rgb(191 219 254 / 0.5)) !important;
        background-size: 220% 220% !important;
        animation: standaloneNavGradient 8s ease-in-out infinite;
        backdrop-filter: blur(24px) saturate(1.35);
        -webkit-backdrop-filter: blur(24px) saturate(1.35);
        border-color: rgb(255 255 255 / 0.62) !important;
        box-shadow: 0 20px 45px rgb(15 23 42 / 0.2), inset 0 1px 1px rgb(255 255 255 / 0.75) !important;
    }

    #portal-support-link {
        display: flex !important;
        bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important;
        right: 0 !important;
        width: 2.75rem;
        height: 2.75rem;
        opacity: .42;
        transform: translateX(.45rem);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    #portal-support-link:hover,
    #portal-support-link:focus-visible,
    #portal-support-link:active {
        opacity: 1;
        transform: translateX(0) scale(1.05);
    }

    #app-global-branding,
    #portal-header,
    #sidebar,
    #sidebar-overlay,
    #portal-footer {
        display: none !important;
    }

    #app-layout-wrapper {
        margin-top: 0 !important;
    }

    #standalone-app-header {
        display: flex !important;
        height: calc(4rem + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
        background: rgb(255 255 255 / 0.56) !important;
        backdrop-filter: blur(22px) saturate(1.3);
        -webkit-backdrop-filter: blur(22px) saturate(1.3);
        border-color: rgb(255 255 255 / 0.62) !important;
        box-shadow: 0 10px 30px rgb(15 23 42 / 0.08), inset 0 1px 1px rgb(255 255 255 / 0.72);
    }

    #main-content-area {
        padding: 5.25rem 1rem 6.5rem;
    }

    .fixed.inset-0 {
        max-height: 100dvh;
        overflow-y: auto !important;
        padding-bottom: max(6.5rem, calc(1rem + env(safe-area-inset-bottom))) !important;
    }

    .fixed.inset-0 > div {
        max-height: calc(100dvh - 7.5rem);
    }

    #toast-container,
    #globalToastContainer {
        top: 4.75rem !important;
        z-index: 10002 !important;
    }

}

#standalone-app-header {
    display: none;
}

#app-more-drawer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

#app-more-drawer > div {
    transform: translateY(1rem);
    transition: transform 220ms ease;
}

#app-more-drawer.is-open {
    opacity: 1;
    visibility: visible;
}

#app-more-drawer.is-open > div {
    transform: translateY(0);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #app-more-drawer,
    #staff-more-drawer {
        padding-bottom: 0 !important;
    }

    #app-more-drawer > div,
    #staff-more-drawer > div {
        max-height: none !important;
        height: 100% !important;
    }
}

.app-command-link {
    display: block;
    border-radius: .75rem;
    color: rgb(226 232 240 / .82);
    font-size: .8rem;
    font-weight: 700;
    padding: .7rem .75rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.app-command-link:hover,
.app-command-link.is-current {
    background: rgb(37 99 235 / .8);
    color: #fff;
}

.app-command-menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease;
}

.standalone-app-tab.is-active {
    background: #dbeafe;
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgb(147 197 253 / 0.55);
}

@media (prefers-reduced-motion: reduce) {
    #standalone-preloader,
    #app-more-drawer,
    #app-more-drawer > div,
    .bottom-app-nav {
        transition: none;
        animation: none;
    }
}

.public-interior,
.public-interior * {
    cursor: auto !important;
}

.public-site a,
.public-site button,
.public-site [role='button'],
.public-site .public-card,
        display: flex !important;
.public-site form,
.public-site iframe {
    transition: all 300ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .public-site a:hover,
    .public-site button:hover,
    .public-site [role='button']:hover,
    .public-site .public-card:hover,
    .public-site article:hover,
    .public-site form:hover,
    .public-site iframe:hover {
        transform: translateY(-0.375rem);
@media (display-mode: standalone), (display-mode: fullscreen) {
    html.app-transition-pending #page-transition-loader {
        display: flex !important;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
}
        border-color: rgb(59 130 246 / 0.5);
        box-shadow: 0 20px 40px rgb(30 58 138 / 0.25);
    }
}

.public-site footer a:hover,
.public-site footer button:hover {
    transform: none;
    border-color: inherit;
    box-shadow: none;
}

.public-site a:hover,
.public-site button:hover,
.public-site [role='button']:hover {
    transform: none !important;
}

.public-site #status-modal form:hover,
.public-site #status-modal a:hover,
.public-site #status-modal button:hover,
.public-site #status-modal input:hover {
    transform: none !important;
    box-shadow: none;
}

.public-site footer > div > div:first-child .text-slate-400::before {
    content: 'Established January 2010';
    display: block;
    margin-bottom: 1rem;
    color: #bfdbfe;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.25;
    text-transform: uppercase;
}

.public-site .public-gradient-hover {
    background-size: 200% 200%;
    transition: all 300ms ease-out, background-position 500ms ease-out;
}

.public-site .public-gradient-hover:hover {
    background-position: 100% 100%;
}

.public-site .public-light-section {
    background-color: #f8fafc;
}

.public-site .public-gradient-section {
    background-image: linear-gradient(135deg, #020617 0%, #172554 52%, #450a0a 100%);
    color: #fff;
}

.public-site .public-light-section .public-card,
.public-site .public-light-section article,
.public-site .public-light-section form {
    background: linear-gradient(135deg, rgb(15 23 42 / 0.98), rgb(30 58 138 / 0.96));
    border: 1px solid rgb(255 255 255 / 0.1);
    color: #fff;
    box-shadow: 0 20px 50px -12px rgb(30 58 138 / 0.35);
}

.public-site .public-light-section .public-card :is(h2, h3, p, label),
.public-site .public-light-section article :is(h2, h3, p),
.public-site .public-light-section form :is(h2, h3, p, label) {
    color: inherit;
}

.public-site .public-light-section input,
.public-site .public-light-section textarea,
.public-site .public-light-section select {
    background-color: rgb(255 255 255 / 0.1);
    border-color: rgb(255 255 255 / 0.2);
    color: #fff;
}

.public-site main > section:nth-of-type(odd) {
    background-image: linear-gradient(135deg, #020617 0%, #172554 52%, #450a0a 100%) !important;
    color: #fff;
}

.public-site main > section:first-child {
    padding-top: 10rem;
}

.public-site main > section:nth-of-type(even) {
    background: #f8fafc !important;
    color: #172554;
}

.public-home #admissions,
.public-home #gallery {
    background: #f8fafc !important;
    color: #172554;
}

.public-home #about {
    background-image: linear-gradient(135deg, #020617 0%, #172554 52%, #450a0a 100%) !important;
    color: #fff;
}

.public-home #about h2,
.public-home #about h3,
.public-home #about p,
.public-home #about a {
    color: #fff !important;
}

.public-home #about article {
    background: rgb(255 255 255 / 0.06) !important;
    border-color: rgb(255 255 255 / 0.12) !important;
}

.public-site main > section:nth-of-type(odd) :is(h1, h2, h3, p, label, span) {
    color: inherit;
}

.public-site main > section:nth-of-type(even):not([id]) article,
.public-site main > section:nth-of-type(even):not([id]) form,
.public-site main > section:nth-of-type(even):not([id]) .glass,
.public-site main > section:nth-of-type(even):not([id]) .gallery-item {
    background: linear-gradient(135deg, rgb(15 23 42 / 0.98), rgb(30 58 138 / 0.96)) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
    color: #fff;
}

.public-site main > section:nth-of-type(even) :is(h1, h2, h3, p, label, span) {
    color: inherit;
}

.public-site main > section a:hover,
.public-site main > section button:hover,
.public-site .public-card:hover,
.public-site main > section:nth-of-type(even):not([id]) article:hover {
    background-image: linear-gradient(120deg, rgb(30 58 138 / 0.98), rgb(185 28 28 / 0.9)) !important;
    background-size: 200% 200%;
    background-position: 100% 100%;
}

.public-site main > section input:focus,
.public-site main > section textarea:focus,
.public-site main > section select:focus {
    border-color: rgb(59 130 246 / 0.8) !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
}

.public-site > header,
.public-site > header a,
.public-site > header button,
.public-site > header a:hover,
.public-site > header button:hover {
    transform: none !important;
}

.public-site > header a,
.public-site > header button {
    transition: color 300ms ease-out, background-color 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out;
}

.public-brand-link,
.public-brand-link:hover,
.public-brand-link:focus,
.public-brand-link:active,
.public-brand-link img {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.public-brand-name,
.public-brand-name:hover,
.public-brand-name:focus,
.public-brand-name:active {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition: none !important;
}