/* Institutional Effectiveness & Accreditation at Berea College
   Shared stylesheet. Colors and fonts follow the 2026 Berea College brand standards:
   Barlow for text, Barlow Condensed for headings, Google Sans Code for small labels.
   Only Berea Blue, Black, and White carry text. Other palette colors are fills and rules. */

:root {
  --berea-blue: #004175;
  --light-blue: #49B4EF;
  --bright-blue: #76E2FF;
  --chartreuse: #D2DE26;
  --gray: #D9D9D4;
  --blue-gray: #8AAAC5;
  --white: #FFFFFF;
  --black: #000000;

  --sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --mono: 'Google Sans Code', ui-monospace, Menlo, Consolas, monospace;

  --max: 72rem;
  --gutter: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

img, svg { max-width: 100%; }

a { color: var(--berea-blue); text-underline-offset: 0.15em; }
a:hover { color: var(--black); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--light-blue);
  outline-offset: 2px;
}
.topbar a:focus-visible, .topbar button:focus-visible, .topbar input:focus-visible,
.site-footer a:focus-visible { outline-color: var(--bright-blue); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--white); color: var(--berea-blue); padding: 0.625rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Header ---------- */
.topbar { background: var(--berea-blue); color: var(--white); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 0.875rem; padding-bottom: 0.875rem; }

.brand { display: flex; align-items: center; gap: 0.875rem; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }
.brand img { display: block; height: 1.875rem; width: auto; padding: 0.125rem; }
.brand .name {
  font-family: var(--display); font-weight: 600; font-size: 1.375rem; line-height: 1.1; letter-spacing: 0.01em;
  border-left: 1px solid var(--white); padding-left: 0.875rem;
}
.brand .short { display: none; }

.header-search { display: flex; align-items: stretch; }
.header-search input {
  width: 14rem; min-height: 2.5rem; padding: 0 0.75rem; border: 0; border-radius: 2px 0 0 2px;
  font: inherit; font-size: 0.9375rem; color: var(--black); background: var(--white);
}
.header-search button {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.5rem;
  border: 0; border-radius: 0 2px 2px 0; background: var(--chartreuse); color: var(--black); cursor: pointer;
}
.header-search button:hover { background: var(--bright-blue); }

.main-nav { background: var(--white); border-bottom: 1px solid var(--gray); }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2rem; }
.main-nav a {
  display: block; padding: 0.75rem 0 0.625rem; border-bottom: 3px solid transparent;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.main-nav a:hover { border-bottom-color: var(--berea-blue); color: var(--berea-blue); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--chartreuse); color: var(--black); }

/* ---------- Page layout: sidebar + content ---------- */
.layout {
  display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 2.75rem;
  padding-top: 1.75rem; padding-bottom: 3.5rem;
}

.sidebar { font-size: 0.9375rem; }
.sidebar .side-title {
  margin: 0; padding: 0 0 0.5rem; border-bottom: 2px solid var(--berea-blue);
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--berea-blue);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar > nav > ul > li { border-bottom: 1px solid var(--gray); }
.sidebar > nav > ul > li > a {
  display: block; padding: 0.625rem 0.25rem; text-decoration: none;
  font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.sidebar > nav > ul > li > a[aria-current="page"] { color: var(--black); }
.sidebar ul ul { padding: 0 0 0.5rem; }
.sidebar ul ul a { display: block; padding: 0.3125rem 0.75rem; text-decoration: none; color: var(--black); }
.sidebar ul ul a:hover { background: var(--gray); color: var(--black); }
.sidebar ul.quick li { border-bottom: 1px solid var(--gray); }
.sidebar ul.quick a { display: block; padding: 0.5rem 0.25rem; text-decoration: none; }
.sidebar ul.quick a:hover { background: var(--gray); color: var(--black); }
.sidebar .side-note { margin: 1.25rem 0 0; padding: 0.875rem 1rem; background: var(--gray); font-size: 0.875rem; }
.sidebar .side-note strong { display: block; margin-bottom: 0.125rem; }

.content { min-width: 0; max-width: 50rem; }

.breadcrumb { margin: 0 0 0.75rem; font-size: 0.875rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.breadcrumb li + li::before { content: ">"; margin-right: 0.25rem; color: var(--black); }

.content h1 {
  margin: 0 0 0.75rem; font-family: var(--display); font-weight: 600;
  font-size: 2.25rem; line-height: 1.1; color: var(--berea-blue);
}
.content h2 {
  margin: 2.25rem 0 0.5rem; font-family: var(--display); font-weight: 600;
  font-size: 1.625rem; line-height: 1.15; color: var(--berea-blue);
}
.content h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.content p { margin: 0 0 1rem; }
.lead { font-size: 1.0625rem; }
.section-intro { margin: 0 0 0.5rem; }

/* ---------- Homepage rows (label, description, button) ---------- */
.rows { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 1.5rem; align-items: center;
  padding: 1.125rem 0; border-top: 1px solid var(--gray);
}
.row:last-child { border-bottom: 1px solid var(--gray); }
.row p { margin: 0; }
.tile {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem;
  min-height: 3.5rem; padding: 0.625rem 1rem; text-align: right; text-decoration: none;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.2; border-radius: 2px;
}
.tile svg { flex: none; }
.tile:hover { text-decoration: underline; }
.tile-blue { background: var(--berea-blue); color: var(--white); }
.tile-blue:hover { color: var(--white); }
.tile-light { background: var(--light-blue); color: var(--black); }
.tile-chartreuse { background: var(--chartreuse); color: var(--black); }
.tile-bluegray { background: var(--blue-gray); color: var(--black); }
.tile-light:hover, .tile-chartreuse:hover, .tile-bluegray:hover { color: var(--black); }

.question-list { margin: 0; padding-left: 1.25rem; }
.question-list li { margin-bottom: 0.375rem; }

/* ---------- Downloadable files ---------- */
.files { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.files li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.875rem; align-items: start;
  padding: 0.875rem 0; border-top: 1px solid var(--gray);
}
.files li:last-child { border-bottom: 1px solid var(--gray); }
.file-type {
  margin-top: 0.125rem; padding: 0.125rem 0; text-align: center;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em;
}
.type-pdf { color: var(--white); background: var(--berea-blue); }
.type-docx { color: var(--black); background: var(--light-blue); }
.files h3 a { text-decoration: none; }
.files h3 a:hover { text-decoration: underline; }
.files h3 svg { margin-left: 0.375rem; vertical-align: -0.125rem; }
.files p { margin: 0.125rem 0 0; font-size: 0.9375rem; }
.file-meta { font-family: var(--mono); font-size: 0.75rem; }

.cycle { margin: 1.5rem 0 0.5rem; }
.cycle img { display: block; width: 100%; height: auto; border: 1px solid var(--gray); }
.cycle figcaption { margin-top: 0.5rem; font-size: 0.875rem; }
.link-list { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.link-list li { margin-bottom: 0.75rem; font-size: 0.9375rem; }
.link-list a { font-weight: 600; font-size: 1rem; }

.help-box { margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--gray); }
.help-box h2 { margin-top: 0; font-size: 1.375rem; }
.help-box p { margin: 0; }

/* ---------- Search results ---------- */
.search-page-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.search-page-form label { flex-basis: 100%; font-weight: 600; }
.search-page-form input {
  flex: 1 1 18rem; min-height: 2.75rem; padding: 0 0.75rem; border: 2px solid var(--berea-blue); border-radius: 2px;
  font: inherit; color: var(--black); background: var(--white);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.25rem;
  border: 0; border-radius: 2px; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--white); background: var(--berea-blue); text-decoration: none;
}
.btn:hover { background: var(--black); color: var(--white); }
.results ol { list-style: none; margin: 0; padding: 0; }
.results li { padding: 0.875rem 0; border-top: 1px solid var(--gray); }
.results .where { font-family: var(--mono); font-size: 0.75rem; }
.results h2 { margin: 0.125rem 0; font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; }
.results p { margin: 0; font-size: 0.9375rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--berea-blue); color: var(--white); font-size: 0.9375rem; }
.site-footer a { color: var(--white); }
.footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; padding-top: 2rem; padding-bottom: 1.25rem; }
.footer-unit { display: flex; flex-direction: column; gap: 0.25rem; }
.footer-unit strong { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.footer-unit .mono { font-family: var(--mono); font-size: 0.75rem; margin-top: 0.375rem; }
.tagline { text-align: right; }
.tagline-serif { margin: 0; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.25rem; }
.tagline-sans { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em; }
.footer-base { padding-bottom: 1.25rem; }
.disclaimer { margin: 0; border-top: 1px solid var(--bright-blue); padding-top: 0.75rem; font-family: var(--mono); font-size: 0.6875rem; }

/* ---------- Narrow screens ---------- */
@media (max-width: 52rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 1.25rem; }
  .content { order: -1; }
  .header-search { flex: 1 1 100%; }
  .header-search input { flex: 1 1 auto; width: auto; }
}
@media (max-width: 40rem) {
  :root { --gutter: 1rem; }
  .brand .name { display: none; }
  .brand .short { display: inline; font-family: var(--display); font-weight: 600; font-size: 1.25rem; border-left: 1px solid var(--white); padding-left: 0.875rem; }
  .main-nav ul { gap: 0 1.25rem; }
  .main-nav a { font-size: 0.8125rem; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .tile { justify-content: space-between; }
  .content h1 { font-size: 1.875rem; }
  .tagline { text-align: left; }
}

@media print {
  .main-nav, .header-search, .sidebar, .skip-link { display: none; }
  .layout { display: block; }
  .topbar, .site-footer, .type-pdf, .type-docx, .tile { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}