/* ==========================================================================
   The Arch — portal shell (frosted glass)
   Vanilla CSS, loaded after legacy Bootstrap 3. All classes are .arch- prefixed.
   The campus photo comes from custom-juniata.css on <body> and is never overridden.
   ========================================================================== */

:root {
    /* Glass surfaces — alphas chosen so white text stays ≥ 4.5:1 even over the
       brightest parts of the photo once blurred. */
    --arch-glass:       rgba(30, 43, 64, .68);
    --arch-glass-blue:  rgba(40, 72, 112, .70);
    --arch-glass-sage:  rgba(62, 84, 52, .72);
    --arch-glass-red:   rgba(140, 28, 20, .80);
    --arch-glass-sand:  rgba(238, 231, 212, .88);
    --arch-glass-menu:  rgba(26, 38, 58, .95);
    --arch-edge:        rgba(255, 255, 255, .22);
    --arch-soft:        rgba(255, 255, 255, .12);
    --arch-soft-2:      rgba(255, 255, 255, .20);

    --arch-text:   #ffffff;
    --arch-text-2: rgba(255, 255, 255, .86);
    --arch-ink:    #1d2738;
    --arch-ink-2:  #4a5466;
    --arch-navy:   #1B365D;
    --arch-gold:   #d6c592;      /* light gold: accents on dark glass only */
    --arch-gold-ink: #6b5a26;    /* dark gold: text on light surfaces */

    --arch-r:    22px;
    --arch-r-sm: 14px;
    --arch-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --arch-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 20px 40px -20px rgba(0,0,0,.45);
}

/* ---------- Page ---------------------------------------------------------- */
body.arch-body {
    min-height: 100vh;
    font-family: var(--arch-font);
    color: var(--arch-ink);
    -webkit-font-smoothing: antialiased;
    background-attachment: fixed;
}
/* Soft wash so the photo reads as a backdrop, not competition */
body.arch-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10,18,30,.12) 0%, rgba(10,18,30,.38) 100%);
}

.arch-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.arch-skip {
    position: absolute;
    left: 16px; top: -80px;
    z-index: 1000;
    padding: 12px 18px;
    border-radius: 12px;
    background: #fff;
    color: var(--arch-navy) !important;
    font: 700 15px/1 var(--arch-font);
    text-decoration: none !important;
}
.arch-skip:focus { top: 14px; outline: 3px solid var(--arch-gold); }

.arch-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Wrapper & glass ---------------------------------------------- */
.arch-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 18px 0 48px;
    font-family: var(--arch-font);
    font-size: 15.5px;
    line-height: 1.5;
}
.arch-wrap *, .arch-wrap *::before, .arch-wrap *::after { box-sizing: border-box; }
/* Any component that sets its own display (grid/flex) must still obey the hidden attribute. */
.arch-wrap [hidden] { display: none !important; }
.arch-wrap :focus-visible { outline: 3px solid var(--arch-gold); outline-offset: 3px; }

.arch-glass {
    background: var(--arch-glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
    border: 1px solid var(--arch-edge);
    border-radius: var(--arch-r);
    box-shadow: var(--arch-shadow);
    color: var(--arch-text);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .arch-glass { background: rgba(30, 43, 64, .94); }
}

/* ---------- Top bar ------------------------------------------------------- */
.arch-bar {
    position: sticky;
    top: 12px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 9px 10px 9px 16px;
    border-radius: 999px;
}
.arch-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}
.arch-brand__mark {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: #fff;
    color: var(--arch-navy);
    font-weight: 800;
}

.arch-nav { flex: 1; min-width: 0; }
.arch-nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.arch-nav__item { position: relative; }
.arch-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--arch-text-2) !important;
    font: 600 14.5px/1 var(--arch-font);
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.arch-nav__link:hover,
.arch-nav__link[aria-expanded="true"] { background: var(--arch-soft); color: #fff !important; }
.arch-nav__link[aria-current="page"],
.arch-nav__item.is-active > .arch-nav__link { background: #fff; color: var(--arch-ink) !important; }
.arch-chev { width: 14px; height: 14px; opacity: .7; transition: transform .2s; }
.arch-nav__link[aria-expanded="true"] .arch-chev { transform: rotate(180deg); }

.arch-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 60;
    min-width: 250px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 16px;
    background: var(--arch-glass-menu);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid var(--arch-edge);
    box-shadow: 0 24px 44px -14px rgba(0,0,0,.55);
}
.arch-menu--wide { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 2px; min-width: 500px; }
.arch-menu--end { left: auto; right: 0; }
.arch-menu[hidden] { display: none !important; }
.arch-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--arch-text-2) !important;
    font-size: 14.5px;
    line-height: 1.3;
    text-decoration: none !important;
}
.arch-menu a:hover { background: var(--arch-soft); color: #fff !important; }
.arch-menu__ext { width: 13px; height: 13px; opacity: .7; }

.no-js .arch-nav__item:hover > .arch-menu,
.no-js .arch-nav__item:focus-within > .arch-menu { display: block !important; }

/* Utility links */
.arch-util { display: flex; align-items: center; gap: 4px; }
.arch-util__link,
.arch-me {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--arch-text-2) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.arch-util__link .arch-icon, .arch-me .arch-icon { width: 17px; height: 17px; }
a.arch-util__link:hover { background: var(--arch-soft); color: #fff !important; }
.arch-util__link--alert { background: #b42318; color: #fff !important; font-weight: 700; }
a.arch-util__link--alert:hover { background: #961c13; }
.arch-util__link--solid { background: #fff; color: var(--arch-ink) !important; font-weight: 700; }
a.arch-util__link--solid:hover { background: #e8edf3; color: var(--arch-ink) !important; }
.arch-util__link--muted { border: 1px dashed var(--arch-edge); }
.arch-me { background: var(--arch-soft-2); color: #fff !important; padding: 5px 14px 5px 5px; }
.arch-avatar {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--arch-navy);
    font-size: 11px;
    font-weight: 800;
}
.arch-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: arch-pulse 1.8s infinite;
}
@keyframes arch-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.arch-menu-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--arch-soft-2);
    color: #fff;
    font: 700 14px/1 var(--arch-font);
    cursor: pointer;
}
.arch-menu-toggle__close { display: none; }
.arch-menu-toggle[aria-expanded="true"] .arch-menu-toggle__open  { display: none; }
.arch-menu-toggle[aria-expanded="true"] .arch-menu-toggle__close { display: block; }

/* ---------- Alert & notices ---------------------------------------------- */
.arch-alert,
.arch-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 13px 20px;
}
.arch-alert { background: var(--arch-glass-red); border-color: rgba(255,190,180,.35); }
.arch-alert p, .arch-notice p { flex: 1; margin: 0; }
.arch-alert a { color: #fff !important; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.arch-notice__close {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.arch-notice__close:hover { background: var(--arch-soft); }

/* ---------- Phone landing ------------------------------------------------- */
.arch-launch { padding: 22px 18px; margin-bottom: 14px; }
.arch-launch__title { margin: 0 0 16px; font: 800 26px/1.15 var(--arch-font); letter-spacing: -.02em; color: #fff; }
.arch-launch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.arch-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 14px 6px;
    border-radius: 16px;
    background: var(--arch-soft);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
}
.arch-tile:hover { background: var(--arch-soft-2); }
.arch-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #fff; color: var(--arch-navy); }
.arch-tile__icon .arch-icon { width: 22px; height: 22px; }
.arch-tile--alert { background: #b42318; }
.arch-tile--alert .arch-tile__icon { color: #b42318; }
.arch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    color: var(--arch-ink) !important;
    font-weight: 800;
    text-decoration: none !important;
}

/* ---------- Content area -------------------------------------------------- */
/* Legacy pages get a solid, readable panel so Bootstrap forms/tables still work. */
.container-body {
    display: block;
    padding: 32px;
    border-radius: var(--arch-r);
    background: rgba(255, 255, 255, .96);
    color: var(--arch-ink);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.45);
    outline: none;
}
.container-body:empty { display: none; }
/* The Today dashboard lays its own glass tiles directly on the photo. */
.arch-body--dash .container-body { padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--arch-text); }

/* ---------- Top bar fit (no overlap) --------------------------------------
   The bar is capped at 1280px, so the nav and the utility links can't both use
   full labels. Brand and utilities never shrink; Webmail, name and Log out are
   icon-only (their labels stay for screen readers and show as tooltips). */
.arch-brand, .arch-util { flex-shrink: 0; }
.arch-util__link:not(.arch-util__link--alert):not(.arch-util__link--solid):not(.arch-util__link--muted) .arch-util__label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.arch-util__link:not(.arch-util__link--alert):not(.arch-util__link--solid):not(.arch-util__link--muted) { padding: 9px; }
.arch-bar { gap: 8px; }
.arch-nav__link { padding: 9px 9px; font-size: 14px; }
/* Spread the menu evenly between the logo and the right-side buttons
   instead of bunching it left with an empty gap before Alerts. */
@media (min-width: 1241px) {
    .arch-nav__list { justify-content: space-evenly; }
}
.arch-me .arch-util__label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1440px) {
    .arch-me { padding: 5px; }
    .arch-me .arch-util__label {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1200px) {
    .arch-util__link--hide-md { display: none; }
    .arch-nav__link { padding: 9px 10px; }
}
@media (max-width: 1240px) {
    .arch-bar { justify-content: space-between; }
    .arch-menu-toggle { display: inline-flex; }
    .arch-nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        display: none;
        padding: 8px;
        border-radius: 20px;
        background: var(--arch-glass-menu);
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
        border: 1px solid var(--arch-edge);
        box-shadow: 0 24px 44px -14px rgba(0,0,0,.55);
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .arch-nav.is-open { display: block; }
    .no-js .arch-nav { position: static; display: block; }
    .arch-nav__list { flex-direction: column; }
    .arch-nav__link { width: 100%; justify-content: space-between; padding: 13px 14px; border-radius: 12px; }
    .arch-menu, .arch-menu--wide {
        position: static;
        min-width: 0;
        grid-template-columns: 1fr;
        padding: 0 0 6px 12px;
        border: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (max-width: 680px) {
    .arch-wrap { width: calc(100% - 20px); padding-top: 10px; }
    .arch-bar { top: 8px; padding-left: 12px; }
    .arch-util__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .arch-me { padding: 5px; }
    .arch-util__link { padding: 9px; }
    .arch-util__link--muted { display: none; }
    .container-body { padding: 20px 16px; }
    .arch-alert { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .arch-wrap *, .arch-pulse { animation: none !important; transition: none !important; }
}