/* ==========================================================================
   The Arch — resource / link pages (Employees, Students, Support …)
   First used by pages/employees/human-resources.php.
   Juniata navy + white solid cards on the clear campus photo, matching the
   Today @ Juniata submission pages. Loaded after arch-portal.css. No Bootstrap.
   ========================================================================== */

/* Drop the white page panel so the campus photo stays clear.
   Works even when the page sits inside extra wrappers (row / col / panel …). */
body.arch-body .container-body:has(.res),
body.arch-body .container-body:has(.res) :is(div, section, article):has(.res):not(.res) {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
}
/* Wrappers between the panel and the cards: no extra spacing or float layout */
body.arch-body .container-body:has(.res) :is(div, section, article):has(.res):not(.res) {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.res {
    --navy:     #1B365D;
    --navy-600: #26497a;
    --navy-50:  #eef2f8;
    --ink:      #1d2738;
    --muted:    #4f5a6b;   /* 6.9:1 on white */
    --line:     #e1e6ee;
    --shadow:   0 10px 28px -16px rgba(10, 24, 48, .55);

    color: var(--ink);
    font-family: var(--arch-font, "Manrope", system-ui, sans-serif);
    font-size: 15.5px;
    line-height: 1.5;
}
.res h1, .res h2, .res p, .res ul { margin: 0; }
.res ul { padding: 0; list-style: none; }
.res .arch-icon { width: 18px; height: 18px; }
.res :focus-visible { outline: 3px solid var(--navy-600); outline-offset: 2px; }

/* ---------- Heading card -------------------------------------------------- */
.res-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 24px 28px;
    border-bottom: 3px solid var(--navy);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}
.res-title {
    color: var(--navy);
    font-size: 32px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.res-lead { margin-top: 6px !important; color: var(--muted); font-size: 16px; }

.res-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 8px;
    background: var(--navy);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s;
}
.res-btn:hover { background: var(--navy-600); }
.res-btn .arch-icon { width: 15px; height: 15px; }

/* ---------- Card grid ----------------------------------------------------- */
.res-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
    align-items: stretch;      /* cards in a row share one height */
}
/* Tall card (largest link group) sits in the first column across two rows;
   the other cards fill in beside it. */
.res-grid { grid-auto-flow: row dense; }
.res-card--tall { grid-column: 1; grid-row: 1 / span 2; }
.res-grid > .res-card--accent { grid-column: span 2; }   /* training spans the two right columns */

.res-card {
    min-width: 0;
    padding: 20px 22px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}
.res-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    font-size: 18px !important;
    font-weight: 800 !important;
}
.res-card__icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--navy);
    color: #fff;
}
.res-card__icon .arch-icon { width: 18px; height: 18px; }
.res-card__text { margin-bottom: 14px !important; color: #2a3445; }
.res-card__note { margin-top: 10px !important; color: var(--muted); font-size: 13.5px; }

/* Training card: navy edge so it stands out as an action item */
.res-card--accent { border-left: 4px solid var(--navy); }

/* ---------- Link rows ----------------------------------------------------- */
.res-links { display: grid; gap: 4px; }
.res-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink) !important;
    text-decoration: none !important;
    transition: background .15s;
}
.res-link:hover { background: var(--navy-50); }
.res-link__text { display: flex; flex-direction: column; min-width: 0; }
.res-link__label { color: var(--navy); font-weight: 700; }
.res-link:hover .res-link__label { text-decoration: underline; text-underline-offset: 3px; }
.res-link__note { color: var(--muted); font-size: 13.5px; }
.res-link > .arch-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1100px) {
    .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .res-grid > .res-card--accent { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .res-grid { grid-template-columns: 1fr; }
    .res-card--tall { grid-column: auto; grid-row: auto; }
    .res-grid > .res-card--accent { grid-column: auto; }
    .res-head { padding: 20px; }
    .res-title { font-size: 26px !important; }
    .res-head .res-btn { width: 100%; justify-content: center; }
    .res-head__actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .res * { transition: none !important; }
}


/* ---------- Header with two actions -------------------------------------- */
.res-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.res-btn--ghost {
    background: #fff;
    color: var(--navy) !important;
    box-shadow: inset 0 0 0 1.5px var(--navy);
}
.res-btn--ghost:hover { background: var(--navy-50); }

/* ---------- Link rows that are buttons (e.g. legacy report forms) -------- */
button.res-link {
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.res-link.is-disabled { cursor: default; }
.res-link.is-disabled:hover { background: none; }
.res-link.is-disabled .res-link__label { color: var(--muted); text-decoration: none; }


/* ---------- Emergency strip (Campus and Public Safety) ------------------- */
.res-emergency {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0 !important;
    padding: 14px 20px;
    border-radius: 14px;
    background: #b42318;
    color: #fff;
    font-size: 15.5px;
    box-shadow: var(--shadow);
}
.res-emergency .arch-icon { width: 22px; height: 22px; flex-shrink: 0; }
.res-emergency strong { font-weight: 800; }


/* ---------- Wide card (spans two columns on desktop) --------------------- */
.res-grid > .res-card--wide { grid-column: span 2; }
@media (max-width: 1100px) { .res-grid > .res-card--wide { grid-column: 1 / -1; } }
@media (max-width: 680px)  { .res-grid > .res-card--wide { grid-column: auto; } }

/* ---------- Callout inside a card ---------------------------------------- */
.res-callout {
    margin-bottom: 12px !important;
    padding: 12px 14px;
    border-left: 4px solid var(--navy);
    border-radius: 8px;
    background: var(--navy-50);
    color: #2a3445;
    font-size: 14.5px;
}
.res-callout strong { display: block; margin-bottom: 2px; color: var(--navy); }

/* ---------- Expandable file list (e.g. what's inside a ZIP) -------------- */
.res-files { margin: 0 12px 12px; font-size: 13.5px; color: var(--muted); }
.res-files summary {
    display: inline-block;
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
}
.res-files summary::-webkit-details-marker { display: none; }
.res-files summary::before { content: "▸ "; display: inline-block; transition: transform .15s; }
.res-files[open] summary::before { transform: rotate(90deg); }
.res-files ul { display: grid; gap: 2px; margin-top: 6px !important; padding-left: 18px !important; list-style: disc !important; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* ---------- Contacts list ------------------------------------------------- */
.res-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
    margin: 0;
}
.res-contacts > div { padding: 8px 12px; border-radius: 8px; }
.res-contacts > div:hover { background: var(--navy-50); }
.res-contacts dt { color: var(--muted); font-size: 13.5px; }
.res-contacts dd { margin: 1px 0 0; color: var(--navy); font-weight: 700; }
.res-contacts a { color: var(--navy); }
@media (max-width: 680px) { .res-contacts { grid-template-columns: 1fr; } }


/* ---------- Callout used on its own between the header and the cards ----- */
.res-callout--card {
    margin: 14px 0 0 !important;
    padding: 14px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

/* ---------- Link list in two columns (inside wide cards) ----------------- */
.res-links--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (max-width: 680px) { .res-links--2col { grid-template-columns: 1fr; } }


/* ==========================================================================
   JUNIATA GOLD ACCENTS (blue + gold)
   Gold #A89968 is too light for text on white (2.6:1), so it is only used for
   rules, bars, icon tiles and hover tints. All words stay Juniata blue.
   To go back to blue-only, delete this whole block.
   ========================================================================== */
.res {
    --gold:      #A89968;   /* Juniata gold: accents only */
    --gold-50:   #f7f3ea;   /* light gold tint for hovers / callouts */
    --gold-200:  #e3d9bf;
    --gold-ink:  #6b5a26;   /* dark gold, 6.6:1 on white: safe for small labels */
}

/* Heading card: gold rule along the bottom, gold bar beside the title */
.res-head { border-bottom-color: var(--gold); }
.res-title { position: relative; padding-left: 16px; }
.res-title::before {
    content: "";
    position: absolute;
    left: 0; top: .12em; bottom: .12em;
    width: 5px;
    border-radius: 3px;
    background: var(--gold);
}

/* Cards: thin gold bar across the top */
.res-card { border-top: 4px solid var(--gold); }
.res-card__title { border-bottom-color: var(--gold-200); }

/* Icon tiles: blue tile, gold icon */
.res-card__icon { background: var(--navy); color: var(--gold); }

/* Link rows: gold tint on hover, gold arrow */
.res-link:hover { background: var(--gold-50); }
.res-link:hover > .arch-icon { color: var(--gold-ink); }
.res-link__label { text-decoration-color: var(--gold) !important; }

/* Buttons: solid blue with a gold underline; ghost button outlined in gold */
.res-btn { box-shadow: inset 0 -3px 0 var(--gold); }
.res-btn:hover { box-shadow: inset 0 -3px 0 var(--gold); }
.res-btn--ghost { box-shadow: inset 0 0 0 1.5px var(--gold); }
.res-btn--ghost:hover { background: var(--gold-50); box-shadow: inset 0 0 0 1.5px var(--gold); }

/* Callouts and accent cards: gold edge, gold tint */
.res-callout { border-left-color: var(--gold); background: var(--gold-50); }
.res-callout--card { background: #fff; border-left: 4px solid var(--gold); }
.res-card--accent { border-left-color: var(--gold); }

/* Small extras */
.res-files summary::before { color: var(--gold-ink); }
.res-contacts > div:hover { background: var(--gold-50); }
.res :focus-visible { outline-color: var(--navy); }


/* ---------- Single status / action card (e.g. account reset) ------------- */
.res-status { margin-top: 14px; max-width: 760px; }
.res-status__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0 !important; }
.res-status .res-callout { margin-top: 4px !important; }
.res-status--ok    .res-card__icon { background: #2e6b3f; color: #fff; }
.res-status--warn  .res-card__icon { background: #8a5300; color: #fff; }
.res-status--error .res-card__icon { background: #b42318; color: #fff; }
.res-status--error { border-top-color: #b42318 !important; }
.res-status button.res-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.res-card__note a, .res-card__text a, .res-callout a { color: var(--navy) !important; font-weight: 700; }


/* ---------- Hours (Campus Facility Hours) -------------------------------- */
/* Cards flow in columns like a masonry wall, so short and long cards pack
   together without the big gaps a row grid leaves. */
.res-masonry { columns: 3 320px; column-gap: 14px; margin-top: 14px; }
.res-masonry > .res-card { break-inside: avoid; margin: 0 0 14px; display: block; }
.res-card__sub { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.res-hours-group + .res-hours-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.res-hours-group__title { margin: 0 0 6px !important; color: var(--navy); font-size: 15px !important; font-weight: 800 !important; }
.res-hours { margin: 0; }
.res-hours > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--line);
}
.res-hours > div:last-child { border-bottom: 0; }
.res-hours dt { color: #3b4658; font-weight: 500; }
.res-hours dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; white-space: nowrap; }
.res-masonry .res-callout { margin-top: 12px !important; }
@media (max-width: 420px) {
    .res-hours > div { display: block; }
    .res-hours dd { text-align: left; white-space: normal; }
}