/* ==========================================================================
   Layout — the page frame every screen shares.

   Structure, top to bottom, exactly as a university site is built:

     .utility     thin dark strip: parent institution, staff link
     .masthead    crest, library name, role badge
     .mainnav     primary navigation + hamburger below 900px
     .crumbs      breadcrumb trail
     main.shell   the page content
     .sitefoot    four-column institutional footer

   The header markup is identical on all eleven pages. Copy it from
   pages/_template.html rather than writing your own.
   ========================================================================== */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.shell--narrow { max-width: var(--shell-narrow); }

/* --- site header --------------------------------------------------------
   One bar, not three. The crest and library name sit on the left, navigation
   on the right, and the account control at the end of it.

   There is deliberately no badge announcing "Public visitor". Telling someone
   they are nobody is not information they asked for; what they need is a way
   to sign in, which is what the button is. Once signed in, the button becomes
   their name, which answers the same question by showing rather than saying. */
.siteheader {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.siteheader__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-5);
}

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand__crest { width: 42px; height: auto; }
.brand__name {
  font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700;
  color: var(--indigo); line-height: 1.15; margin: 0;
}
/* The university's name is not repeated here. It is on the crest, it is in
   the menu, and it is in the footer; a third copy in the header is noise. */

/* Navigation lives behind one button at every width.

   A row of links that turns into a hamburger below 900px is two navigations
   to build, test and keep in step. One is enough, and it keeps the header to
   a single quiet line so the search field is the loudest thing on the page. */
.mainnav { margin-left: auto; position: relative; }

.navtoggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--indigo); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer;
}
.navtoggle:hover { background: var(--wash); }
/* Three bars that become a cross when the menu is open.

   The shape is driven by aria-expanded, not by a class of its own. That is
   deliberate: the attribute a screen reader reads and the picture a sighted
   reader sees are then the same fact, and they cannot drift apart. */
.navtoggle__bars { display: block; width: 16px; height: 11px; position: relative; }
.navtoggle__bars::before, .navtoggle__bars::after, .navtoggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--indigo); border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.navtoggle__bars::before { top: 0; }
.navtoggle__bars span    { top: 4.5px; }
.navtoggle__bars::after  { bottom: 0; }

.navtoggle[aria-expanded="true"] .navtoggle__bars::before {
  transform: translateY(4.5px) rotate(45deg);
}
.navtoggle[aria-expanded="true"] .navtoggle__bars span { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars::after {
  transform: translateY(-4.5px) rotate(-45deg);
}

.mainnav__list {
  list-style: none; margin: 0; padding: var(--space-2);
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(26, 26, 46, 0.14);
  z-index: 60;
}
.mainnav__list[hidden] { display: none; }
.mainnav__link {
  display: block; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--ink); text-decoration: none; border-radius: var(--radius);
}
.mainnav__link:hover { background: var(--wash); color: var(--indigo); }
.mainnav__link[aria-current="page"] { color: var(--indigo); background: var(--indigo-wash); }

/* A rule between groups of links: the catalogue, then your account, then the
   desk. Presentational only, so it is hidden from assistive technology. */
.mainnav__sep { height: 1px; background: var(--rule); margin: var(--space-2) var(--space-3); }
.mainnav__label {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted);
}

@media (max-width: 560px) {
  .brand__name { font-size: 0.9375rem; }
  .mainnav__list { min-width: 220px; }
}

/* --- hero ---------------------------------------------------------------
   The catalogue's front door. A search field is what almost everyone came
   for, so it is the first and largest thing on the page rather than one
   panel among several. */
.hero {
  background: var(--indigo);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(228,180,84,0.16), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(59,44,122,0.65), transparent 48%);
  color: var(--on-dark);
  padding: var(--space-7) 0;
}
.hero__inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-5); }
.hero h1 { color: var(--on-dark); font-size: 2.5rem; margin-bottom: var(--space-3); max-width: 20ch; }
.hero__lead { font-size: var(--text-lg); color: var(--on-dark-muted); max-width: 56ch; margin-bottom: var(--space-6); }
.hero__search { display: flex; gap: var(--space-3); max-width: 720px; flex-wrap: wrap; }
.hero__search .input {
  flex: 1 1 300px; font-size: var(--text-base);
  padding: var(--space-4); border: none; border-radius: var(--radius-lg);
}
.hero__search .btn { padding: var(--space-4) var(--space-6); font-size: var(--text-base); border-radius: var(--radius-lg); }
.hero__hint { font-size: var(--text-sm); color: var(--on-dark-faint); margin: var(--space-3) 0 0; }
.hero__stats { display: flex; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__stat b { display: block; font-family: var(--font-head); font-size: var(--text-2xl); color: var(--gold); }
.hero__stat span { font-size: var(--text-sm); color: var(--on-dark-faint); }

@media (max-width: 700px) {
  .hero { padding: var(--space-6) 0; }
  .hero h1 { font-size: 1.875rem; }
}

/* --- breadcrumbs -------------------------------------------------------- */
.crumbs { padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--ink-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--rule-strong); }
.crumbs li:last-child::after { content: ""; }

/* --- page body ---------------------------------------------------------- */
/* Longhand, deliberately. `main` carries both .shell and .page, and a
   `padding:` shorthand here would reset the horizontal padding .shell sets,
   putting text hard against the screen edge on a phone. */
.page { padding-top: var(--space-2); padding-bottom: var(--space-7); }
.page__head { margin-bottom: var(--space-5); }
.page__lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: 68ch; margin: 0; }

/* Two-column: main content + supporting sidebar. Stacks below 900px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }

/* The sidebar explains how to read the results, so it has to stay visible
   while the results are being read. It sticks below the header rather than at
   the top of the screen, or the header would cover it.

   max-height plus overflow so that a sidebar taller than the window can still
   be scrolled to its end instead of having its last line cut off. */
.split__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  max-height: calc(100vh - var(--header-h) - var(--space-6));
  overflow-y: auto;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* Sticking is pointless in one column: it would pin the aside over the
     results it is meant to sit beside. */
  .split__aside { position: static; max-height: none; }
}

/* --- footer ------------------------------------------------------------- */
.sitefoot { background: var(--indigo-dark); color: var(--on-dark-faint); font-size: var(--text-sm); margin-top: var(--space-7); }
.sitefoot__inner {
  max-width: var(--shell); margin: 0 auto; padding: var(--space-6) var(--space-5);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.sitefoot h2 { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--space-3); }
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: var(--space-2); }
.sitefoot a { color: var(--on-dark-link); text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; }
.sitefoot__base {
  border-top: 1px solid var(--on-dark-rule);
  max-width: var(--shell); margin: 0 auto; padding: var(--space-4) var(--space-5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--on-dark-faint);
}
@media (max-width: 900px) { .sitefoot__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sitefoot__inner { grid-template-columns: 1fr; } }