/**
 * @file error-page.css
 * Styles for the redesigned 404 / "Content not found" page
 * (node 34511, /content-not-found). Scoped to the .error-page wrapper
 * from node--34511.html.twig and the page's body class.
 */

/* error-page.css is attached only by node--34511.html.twig, so it loads ONLY on
   the 404 page. That means these global blocks can be hidden unconditionally
   (a body-class scope fails because a real 404 keeps the missing URL's path). */
#block-gmu-libraries-pagetitle,
.breadcrumb-region {
  display: none;
}

.error-page {
  width: 100%;
  padding: 3rem 1rem 4rem;
}

.error-page__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.error-page .error-page__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-32);
  color: var(--gmu-primary-green);
  /* Center the heading and strip the theme's decorative accents. The global
     `.page-content h1` rule adds a yellow LEFT bar + paddings with !important,
     so these overrides need !important and 2-class specificity to win. */
  display: block;
  width: auto;
  margin: 0 auto 1rem;
  text-align: center;
  border-bottom: none !important;
  border-left: none !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  background: none !important;
}

.error-page__text {
  font-size: var(--font-size-20);
  color: var(--gmu-dark-gray);
  line-height: 1.5;
  margin: 0 auto 2rem;
  max-width: 640px;
}

/* The search-bar component aligns its own contents to the left. */
.error-page .search-bar {
  text-align: left;
}

/* Five tabs may not fit one row in the narrower error-page column. */
.error-page .search-bar__tabs {
  flex-wrap: wrap;
}

/* "What am I searching for?" is not relevant on the 404 page. */
.error-page .search-bar__help-link {
  display: none;
}

/* Hide Advanced Search by default (Library Website tab is default on 404).
   search.js reveals it when the user switches to a non-website tab. */
.error-page .search-bar__advanced-link {
  display: none;
}

/* Search wrapper background needs contrast against the white page background. */
.error-page .search-bar__wrapper {
  background: #f0f0f0;
}

@media (max-width: 600px) {
  .error-page { padding: 2rem 0.5rem 3rem; }
  .error-page__text { font-size: var(--font-size-16); }
}