/* ==========================================================================
   bayan-pages.css — the sections the EduSpace template has no equivalent for.

   Editorial pages (site_pages), campus facilities, centres, documents,
   alumni, vacancies, publications, international agreements, and the two
   public forms that write to a dashboard inbox.

   Every selector is namespaced .bu-*, so none of the 392 KB of template CSS
   the site ships unmodified can be affected by anything here, and nothing
   here can be affected by it. Colours come from the crest palette defined on
   :root in bayan-theme.css; each var() carries the literal as a fallback so
   this file still renders correctly if it is ever loaded on its own.

   Right-to-left needs almost nothing: the layout is flex and grid with
   logical properties (margin-inline, padding-inline, border-inline-start),
   which mirror on their own when `dir="rtl"` is set on the section. The two
   exceptions are called out where they appear.
   ========================================================================== */

:root {
  --bu-page-ink: var(--header, #33200a);
  --bu-page-muted: #6b5b46;
  --bu-page-line: rgba(111, 65, 0, 0.14);
  --bu-page-surface: #fff;
  --bu-page-tint: var(--bayan-sand, #f3ece0);
  --bu-page-radius: 14px;
  --bu-page-shadow: 0 3px 16px rgba(51, 32, 10, 0.07);
  --bu-page-shadow-lift: 0 14px 34px rgba(51, 32, 10, 0.14);
}

/* Headings render the text that was stored.
 *
 * The template capitalises every word in a heading, which suits its own
 * hand-written captions and not a database row: "What it covers" came out as
 * "What It Covers" and "University of Erfurt" as "University Of Erfurt".
 * Every heading in this file shows a value an editor typed, so the right
 * treatment is none — and where they do want title case, they can type it.
 */
.bu-prose h3,
.bu-bullets h3,
.bu-side-panel h4,
.bu-side-nav h4,
.bu-doc-group__title,
.bu-agreement__title,
.bu-form-card h3,
.bu-record-card__title,
.bu-alumnus__name,
.bu-vacancy__title,
.bu-pub__title,
.bu-doc-row__title {
  text-transform: none;
}

/* ======================================================== prose & layout == */

.bu-page__eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bayan-blue, #0066b3);
  margin-bottom: 10px;
}

.bu-page__lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.75;
  color: var(--bu-page-ink);
  font-weight: 500;
  margin-bottom: 26px;
}

.bu-page__image {
  margin-bottom: 30px;
  border-radius: var(--bu-page-radius);
  overflow: hidden;
}
.bu-page__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* The renderer in components/sections/RichText.tsx emits only p, h3 and ul,
   because those are the only three marks the stored plain text carries. */
.bu-prose {
  line-height: 1.9;
  color: var(--bu-page-muted);
}
.bu-prose p {
  margin-bottom: 18px;
}
.bu-prose h3 {
  margin: 34px 0 14px;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--bu-page-ink);
}
.bu-prose > h3:first-child {
  margin-top: 0;
}
.bu-prose ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.bu-prose ul li {
  position: relative;
  /* Logical, so the marker moves to the right-hand side in Arabic and
     Kurdish without a second rule. */
  padding-inline-start: 26px;
  margin-bottom: 10px;
}
.bu-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bayan-gold, #c89a11);
}

.bu-bullets {
  margin-top: 34px;
}
.bu-bullets h3 {
  font-size: clamp(20px, 2vw, 26px);
  color: var(--bu-page-ink);
  margin-bottom: 14px;
}
.bu-bullets ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 26px;
}
.bu-bullets li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--bu-page-muted);
  line-height: 1.7;
}
.bu-bullets li::before {
  content: "\f00c"; /* fa-check */
  /* The template ships Font Awesome 5 **Pro**, not Free — naming the Free
     family here resolved to no font at all and every bullet rendered as the
     missing-glyph box. Free is kept as a fallback in case the licensed files
     are ever swapped out. */
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  font-size: 13px;
  color: var(--bayan-blue, #0066b3);
}

/* ============================================================ side column = */

.bu-side-nav,
.bu-side-panel {
  background: var(--bu-page-tint);
  border-radius: var(--bu-page-radius);
  padding: 28px 26px;
  /* Not sticky.
   *
   * It was, at `top: 110px`, so it would follow the reader down a long
   * article. The cost was that where it rendered stopped being a property of
   * the page: a sticky box is pushed down to its `top` line whenever its
   * natural position would sit above it, so the panel's height on screen
   * depended on the scroll position and the viewport rather than on the
   * layout. Moving between pages of a section — which is exactly what this
   * panel is for — it appeared at a different height each time. Measured on
   * two pages with identical structure and an identical column top of 406px,
   * it rendered at 433px on one and 516px on the other.
   *
   * Static, it starts at the top of its column, which is the same place on
   * every page in the section. The reader loses it when they scroll past;
   * that is a smaller loss than a landmark that will not hold still. */
  position: static;
}

.bu-side-nav h4,
.bu-side-panel h4 {
  font-size: 19px;
  margin: 0 0 16px;
  color: var(--bu-page-ink);
}

.bu-side-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bu-side-nav li + li {
  border-top: 1px solid var(--bu-page-line);
}
.bu-side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--bu-page-ink);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.2s ease, transform 0.2s ease;
}
.bu-side-nav a i {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  color: var(--bayan-gold-dark, #a37c0a);
}
.bu-side-nav a:hover,
.bu-side-nav a:focus-visible {
  color: var(--bayan-blue, #0066b3);
}

/* The page the reader is on. It sits in the list so the list does not change
   shape between pages, and it is marked so it does not read as a link that
   does nothing. The rule is the same gold used for the group headings in the
   navigation panel; `span` and `a` are styled together so the row keeps its
   height and the icons stay in one column. */
.bu-side-nav li > span,
.bu-side-nav li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-weight: 500;
  line-height: 1.5;
}
.bu-side-nav li.is-current > span {
  position: relative;
  font-weight: 700;
  color: var(--bayan-brown-dark, #4a2b00);
  cursor: default;
}
.bu-side-nav li.is-current > span i {
  color: var(--bayan-blue, #0066b3);
}
/* A short bar on the leading edge, mirrored by the logical property so it
   moves to the right in Kurdish and Arabic. */
.bu-side-nav li.is-current > span::before {
  content: "";
  position: absolute;
  inset-inline-start: -14px;
  top: 50%;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--bayan-gold, #c89a11);
  transform: translateY(-50%);
}

.bu-side-panel__photo {
  margin: -4px 0 18px;
  border-radius: 12px;
  overflow: hidden;
}
.bu-side-panel__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.bu-meta-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bu-meta-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 0;
}
.bu-meta-list li + li {
  border-top: 1px solid var(--bu-page-line);
}
.bu-meta-list span {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bu-page-muted);
}
.bu-meta-list strong {
  font-weight: 600;
  color: var(--bu-page-ink);
  overflow-wrap: anywhere;
}
.bu-meta-list a {
  color: var(--bayan-blue, #0066b3);
}
.bu-meta-list__note {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: var(--bu-page-muted);
}

/* ============================================================ record cards = */

.bu-record-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 28px 24px;
  background: var(--bu-page-surface);
  border-radius: var(--bu-page-radius);
  box-shadow: var(--bu-page-shadow);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease;
}
.bu-record-card--wide {
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}
.bu-record-card:hover,
.bu-record-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--bu-page-shadow-lift);
}

/* The photograph sits behind the card and comes forward on contact, so a
   grid at rest reads as a set of labelled tiles rather than a wall of
   pictures. A card with no photograph simply never gets this element. */
.bu-record-card__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.bu-record-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bu-record-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(51, 32, 10, 0.92) 0%,
    rgba(51, 32, 10, 0.72) 55%,
    rgba(51, 32, 10, 0.5) 100%
  );
}
.bu-record-card:hover .bu-record-card__photo,
.bu-record-card:focus-visible .bu-record-card__photo {
  opacity: 1;
}
.bu-record-card:hover .bu-record-card__title,
.bu-record-card:focus-visible .bu-record-card__title,
.bu-record-card:hover .bu-record-card__text,
.bu-record-card:focus-visible .bu-record-card__text,
.bu-record-card:hover .bu-record-card__meta,
.bu-record-card:focus-visible .bu-record-card__meta {
  color: #fff;
}

.bu-record-card__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bayan-blue-pale, #e6f1f9);
  color: var(--bayan-blue, #0066b3);
  font-size: 22px;
  transition: background 0.3s ease, color 0.3s ease;
}
.bu-record-card:hover .bu-record-card__mark,
.bu-record-card:focus-visible .bu-record-card__mark {
  background: var(--bayan-gold, #c89a11);
  color: var(--bayan-brown-dark, #4a2b00);
}

.bu-record-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bu-record-card__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bu-page-ink);
  transition: color 0.3s ease;
}
.bu-record-card__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bu-page-muted);
  transition: color 0.3s ease;
}
.bu-record-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--bu-page-muted);
  transition: color 0.3s ease;
}
.bu-record-card__meta i {
  color: var(--bayan-gold-dark, #a37c0a);
  margin-inline-end: 5px;
}
.bu-record-card:hover .bu-record-card__meta i,
.bu-record-card:focus-visible .bu-record-card__meta i {
  color: var(--bayan-gold, #c89a11);
}

/* ================================================================= alumni = */

.bu-alumnus {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bu-page-surface);
  border-radius: var(--bu-page-radius);
  box-shadow: var(--bu-page-shadow);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease;
}
.bu-alumnus:hover,
.bu-alumnus:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--bu-page-shadow-lift);
}
.bu-alumnus__photo {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bu-page-tint);
}
.bu-alumnus__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No stock portrait for a graduate with no photograph — the initial is
   theirs, a borrowed face is somebody else's. */
.bu-alumnus__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 56px;
  font-weight: 700;
  color: var(--bayan-gold-dark, #a37c0a);
  background: linear-gradient(
    145deg,
    var(--bayan-sand, #f3ece0),
    var(--bayan-gold-pale, #f7efd8)
  );
}
.bu-alumnus__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 20px 24px;
}
.bu-alumnus__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--bu-page-ink);
}
.bu-alumnus__headline {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bu-page-muted);
}
.bu-alumnus__year {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bayan-blue, #0066b3);
}

/* ============================================================== vacancies = */

.bu-vacancy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.bu-vacancy {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  background: var(--bu-page-surface);
  border-radius: var(--bu-page-radius);
  box-shadow: var(--bu-page-shadow);
  text-decoration: none;
  /* A coloured edge rather than a full border: it marks the row's state
     without drawing a box around every post. Logical, so it sits on the
     right in Arabic and Kurdish. */
  border-inline-start: 4px solid var(--bayan-blue, #0066b3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.bu-vacancy:hover,
.bu-vacancy:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--bu-page-shadow-lift);
}
.bu-vacancy.is-closed {
  border-inline-start-color: #a89b88;
  background: var(--bu-page-tint);
}
.bu-vacancy__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}
.bu-vacancy__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--bu-page-ink);
}
.bu-vacancy__flag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ded5c6;
  color: #5b4c37;
}
.bu-vacancy__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bu-page-muted);
}
.bu-vacancy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 14px;
  color: var(--bu-page-muted);
}
.bu-vacancy__meta i {
  color: var(--bayan-gold-dark, #a37c0a);
  margin-inline-end: 5px;
}
.bu-vacancy__arrow {
  flex: 0 0 auto;
  color: var(--bayan-blue, #0066b3);
  font-size: 18px;
}
/* The arrow points the way the text runs; one that keeps pointing right in
   Arabic points backwards. */
[dir="rtl"] .bu-vacancy__arrow i {
  transform: scaleX(-1);
}

.bu-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border-radius: 10px;
  background: var(--bayan-gold-pale, #f7efd8);
  color: var(--bayan-brown-dark, #4a2b00);
  font-weight: 600;
}
.bu-apply {
  margin-top: 40px;
}

/* ============================================================== documents = */

.bu-doc-groups {
  display: grid;
  gap: 42px;
}
.bu-doc-group__title {
  font-size: clamp(20px, 2vw, 25px);
  color: var(--bu-page-ink);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bayan-gold, #c89a11);
}
.bu-doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.bu-doc-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--bu-page-surface);
  border: 1px solid var(--bu-page-line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bu-doc-row:hover,
.bu-doc-row:focus-visible {
  border-color: var(--bayan-gold, #c89a11);
  box-shadow: var(--bu-page-shadow);
}
.bu-doc-row > i {
  flex: 0 0 auto;
  font-size: 26px;
  color: #c0392b; /* the PDF red readers already recognise */
}
.bu-doc-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.bu-doc-row__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--bu-page-ink);
}
.bu-doc-row__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bu-page-muted);
}
.bu-doc-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--bu-page-muted);
}
.bu-doc-row__cta {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--bayan-blue, #0066b3);
}

.bu-doc-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--bayan-blue, #0066b3);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease;
}
.bu-doc-download:hover,
.bu-doc-download:focus-visible {
  background: var(--bayan-blue-dark, #005396);
  color: #fff;
}

/* =========================================================== publications = */

.bu-pub-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}
.bu-pub {
  padding: 24px 26px;
  background: var(--bu-page-surface);
  border-radius: var(--bu-page-radius);
  box-shadow: var(--bu-page-shadow);
  /* A citation is a left-to-right run even on an Arabic page: the authors,
     the journal and the DOI are Latin, and letting them inherit RTL breaks
     the punctuation order. The heading above the list still mirrors. */
  direction: ltr;
  text-align: start;
}
.bu-pub__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 6px;
  color: var(--bu-page-ink);
}
.bu-pub__title a {
  color: inherit;
  text-decoration: none;
}
.bu-pub__title a:hover,
.bu-pub__title a:focus-visible {
  color: var(--bayan-blue, #0066b3);
  text-decoration: underline;
}
.bu-pub__authors {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--bu-page-muted);
}
.bu-pub__meta {
  margin: 0;
  font-size: 15px;
  color: var(--bu-page-muted);
}
.bu-pub__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.bu-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bayan-blue-pale, #e6f1f9);
  color: var(--bayan-blue-dark, #005396);
}
.bu-pub__link {
  margin: 12px 0 0;
  font-size: 15px;
}
.bu-pub__link a {
  color: var(--bayan-blue, #0066b3);
  font-weight: 600;
}

/* ============================================================= agreements = */

.bu-agreement {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  background: var(--bu-page-surface);
  border-radius: var(--bu-page-radius);
  box-shadow: var(--bu-page-shadow);
}
.bu-agreement.is-expired {
  background: var(--bu-page-tint);
}
.bu-agreement__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.bu-agreement__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bu-page-tint);
  overflow: hidden;
}
.bu-agreement__logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.bu-agreement__logo--blank {
  color: var(--bayan-gold-dark, #a37c0a);
  font-size: 22px;
}
.bu-agreement__partner {
  display: block;
  font-weight: 700;
  color: var(--bu-page-ink);
}
.bu-agreement__country {
  display: block;
  font-size: 14px;
  color: var(--bu-page-muted);
}
.bu-agreement__title {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--bu-page-ink);
}
.bu-agreement__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bu-page-muted);
  margin-bottom: 16px;
}
.bu-agreement__meta {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.bu-agreement__meta li {
  display: flex;
  flex-direction: column;
}
.bu-agreement__meta span {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bu-page-muted);
}
.bu-agreement__meta strong {
  font-size: 15px;
  color: var(--bu-page-ink);
}
.bu-agreement__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 600;
}
.bu-agreement__links a {
  color: var(--bayan-blue, #0066b3);
}

/* ================================================================= filter = */

.bu-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.bu-filter__item {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--bu-page-line);
  color: var(--bu-page-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bu-filter__item:hover,
.bu-filter__item:focus-visible {
  border-color: var(--bayan-gold, #c89a11);
}
.bu-filter__item.is-active {
  background: var(--bayan-blue, #0066b3);
  border-color: var(--bayan-blue, #0066b3);
  color: #fff;
}

/* ================================================================== forms = */

.bu-form-section {
  background: var(--bu-page-tint);
}
.bu-form-card {
  background: var(--bu-page-surface);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--bu-page-shadow);
}
.bu-form-card h3 {
  font-size: clamp(21px, 2.2vw, 27px);
  color: var(--bu-page-ink);
  margin-bottom: 18px;
}

.bu-form {
  margin-top: 22px;
}
.bu-form__hint {
  font-size: 14px;
  color: var(--bu-page-muted);
  margin-bottom: 18px;
}
.bu-form__error {
  margin-top: 20px;
  padding: 13px 17px;
  border-radius: 10px;
  background: #fdeceb;
  color: #96261c;
  font-weight: 600;
}
.bu-form__done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #e9f5ed;
  color: #1e6b3a;
  font-weight: 600;
  font-size: 17px;
}

.bu-field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bu-page-ink);
}
.bu-field__label abbr {
  margin-inline-start: 3px;
  color: #c0392b;
  text-decoration: none;
}
.bu-field__input {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  font-family: inherit;
  color: var(--bu-page-ink);
  background: #fff;
  border: 1px solid var(--bu-page-line);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bu-field__input:focus {
  outline: none;
  border-color: var(--bayan-blue, #0066b3);
  box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.14);
}
.bu-field__input.has-error {
  border-color: #c0392b;
}
.bu-field__error {
  margin: 6px 0 0;
  font-size: 14px;
  color: #96261c;
}
.bu-field__hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--bu-page-muted);
}

.bu-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bu-page-muted);
  cursor: pointer;
}
.bu-check input {
  margin-top: 4px;
  width: 17px;
  height: 17px;
  accent-color: var(--bayan-blue, #0066b3);
  flex: 0 0 auto;
}

/* Off-screen rather than display:none, which some bots skip. It is also
   aria-hidden and tabindex="-1" in the markup, so nobody reaches it. */
.bu-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================ empty state = */

.bu-empty {
  padding: 44px 20px;
  text-align: center;
  font-size: 17px;
  color: var(--bu-page-muted);
  background: var(--bu-page-tint);
  border-radius: var(--bu-page-radius);
}

/* ============================================================== responsive = */

@media (max-width: 1199px) {
  /* Kept for the record: the stacked layout used to have to undo the sticky
     positioning above. Both are static now, so there is nothing to undo. */
  .bu-side-nav,
  .bu-side-panel {
    position: static;
  }
}

@media (max-width: 575px) {
  .bu-vacancy,
  .bu-doc-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .bu-vacancy__arrow {
    align-self: flex-end;
  }
  .bu-record-card--wide {
    flex-direction: column;
  }
}

/* ==========================================================================
   The navigation mega panel.

   The template's dropdown is a 250px column with 30px of padding and 15px
   between links — right for the demo's three-link menus, wrong for a
   university's. Bayan's sections carry eight, nine and twelve links, so a
   section rendered as a tall white ribbon that ran past the right edge of the
   window with nothing to tell one link from the next.

   This is a grouped panel: a column per group, each with a heading, an icon
   and a gold hairline, its links beneath. The palette is the crest and only
   the crest — brown ink, gold rules, blue on contact, cream for the footer
   row. There is no second accent, which is what keeps a panel of thirty links
   calm.

   Scoped to .bu-mega, so the template's own dropdown is untouched. Layout is
   logical properties throughout, so the whole panel mirrors on the Kurdish
   and Arabic pages without a second rule.
   ========================================================================== */

.header-main .main-menu ul li .submenu.bu-mega {
  --bu-mega-pad: 30px;

  display: grid;
  gap: 0 30px;
  /* Columns are capped so a group's links stay in a readable measure; the
     panel then sizes itself to whatever those columns add up to. */

  /* The template's min-width assumes one column. */
  min-width: 0;

  padding: 26px var(--bu-mega-pad) 0;
  border-radius: 0 0 14px 14px;
  /* The panel is as wide as the menu, so it reads as a surface dropped from
     the bar rather than a card floating under one label — see the positioning
     block below.
     The crest's gold, as the panel's edge: it reads as part of the header
     rather than as a card floating under it. */
  border-top: 3px solid var(--bayan-gold, #c89a11);
  box-shadow: 0 22px 50px rgba(51, 32, 10, 0.2);
  overflow: hidden;
}

/* ---- flat sections: a plain list, filled column-major ------------------- */
/* Row-major is the browser's default and reads 1-2-3 across, so scanning a
   column top to bottom gives 1-4-7. Filling by column restores reading
   order; the row count comes from the component because CSS cannot count
   children. */
.header-main .main-menu ul li .submenu.bu-mega:not(.bu-mega--grouped) {
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--bu-mega-rows, 4), auto);
  gap: 2px 28px;
  padding-bottom: 8px;
}
.bu-mega:not(.bu-mega--grouped)[data-cols="1"] { grid-template-columns: minmax(210px, 280px) 1fr; }
.bu-mega:not(.bu-mega--grouped)[data-cols="2"] { grid-template-columns: repeat(2, minmax(200px, 260px)) 1fr; }
.bu-mega:not(.bu-mega--grouped)[data-cols="3"] { grid-template-columns: repeat(3, minmax(190px, 250px)) 1fr; }

/* ---- grouped sections: a column per group ------------------------------ */
.header-main .main-menu ul li .submenu.bu-mega--grouped {
  grid-auto-flow: row;
  align-items: start;
}
/* The trailing `1fr` is a spacer, and it is load-bearing: the panel is wider
   than its columns, so without a track reaching the far edge the footer's
   `grid-column: 1 / -1` stops where the last column does — it bled to 702px
   of 1406px before this was added.
 *
 * Four groups is the one case with no slack: at the panel's width four
 * columns at a 195px minimum plus the gaps and padding come to 930px against
 * roughly 890px of menu. No section has four groups today, so rather than
 * shrink the other layouts for a case that does not exist, the four-column
 * minimum is 0 — the columns give way instead of the panel overflowing. */
.bu-mega--grouped[data-cols="1"] { grid-template-columns: minmax(230px, 300px) 1fr; }
.bu-mega--grouped[data-cols="2"] { grid-template-columns: repeat(2, minmax(215px, 280px)) 1fr; }
.bu-mega--grouped[data-cols="3"] { grid-template-columns: repeat(3, minmax(210px, 270px)) 1fr; }
.bu-mega--grouped[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 250px)) 1fr; }

/* ---- one panel, the width of the menu ----------------------------------- */
/* The template positions a dropdown against its own menu item. With three or
   four links that is invisible; with panels between 520px and 1120px wide it
   meant the panel jumped sideways *and* resized every time the pointer moved
   along the bar, and the rightmost section's ran off the screen.
 *
 * So every panel spans the same fixed span instead — one edge to the other,
 * every time. Nothing moves and nothing is orphaned; only the columns inside
 * change. A surface with no position of its own has no position to read as
 * wrong.
 *
 * That span is the menu itself: the first label's leading edge to the last
 * label's trailing edge. It ran the full width of the header bar before, from
 * the crest to the search icon, which put a hard edge a long way out from
 * anything it belonged to. Aligned to the labels, the panel is visibly the
 * menu's own surface.
 *
 * The row is the containing block, so the span follows the labels rather than
 * a number written here — which matters most in Kurdish and Arabic, where the
 * same seven labels set to a different width. `fit-content` is what makes the
 * row's box the labels' extent: it is a flex container filling `.header-left`
 * with `justify-content: center`, so its box was 1042px around 893px of
 * labels. Shrink-wrapped and centred by `margin-inline`, the labels do not
 * move — the box around them just stops overreaching. */
.header-3 .header-main .main-menu nav > ul {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.header-3 .main-menu nav > ul > li.bu-nav-item {
  position: static;
}
.header-main .main-menu ul li .submenu.bu-mega {
  /* Both edges pinned to the row, so the panel is the width of the menu. */
  inset-inline: 0;
  width: auto;
  max-width: none;
  /* The template's `top: 100%` measured the header bar, which ends where the
     panel should start. Against the row it stops 10px short — the bar's own
     bottom padding — so the panel would ride up over the bar's edge. */
  top: calc(100% + 10px);
}

/* The template spaces items with padding-bottom on every item but the last,
   which inside a grid puts the gap in the wrong place and leaves the columns
   ragged. The grid's own gap does it evenly. */
.header-main .main-menu ul li .submenu.bu-mega li,
.header-main .main-menu ul li .submenu.bu-mega li:not(:last-child) {
  padding: 0;
  width: auto;
}

.bu-mega__group {
  padding-bottom: 26px !important;
}

/* ---- the group heading -------------------------------------------------- */
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  /* The hairline is what separates a heading from its links without a box
     around either. Gold at a third strength: at full it competes with the
     rule along the top of the panel. */
  border-bottom: 1px solid rgba(200, 154, 17, 0.45);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  /* Sentence case, not small caps. Small caps suit "Study" and "Leadership"
     and are brutal on "College of Engineering and Science (CENG)", which is
     the label the data actually carries. */
  text-transform: none;
  line-height: 1.35;
  color: var(--header, #33200a);
  /* A heading is the one thing in the panel allowed to wrap: the links are
     sized to their column, and a college name is not. Without this the
     `nowrap` on the shared link rule ran three college names straight
     through each other. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.header-main .main-menu ul li .submenu.bu-mega a.bu-mega__head:hover,
.header-main .main-menu ul li .submenu.bu-mega a.bu-mega__head:focus-visible {
  color: var(--bayan-blue, #0066b3) !important;
  border-bottom-color: var(--bayan-blue, #0066b3);
}
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__head {
  align-items: flex-start;
}
.bu-mega__head i {
  flex: 0 0 auto;
  width: 17px;
  /* Optical alignment with the first line of a heading that wraps. */
  margin-top: 2px;
  font-size: 14px;
  text-align: center;
  color: var(--bayan-gold-dark, #a37c0a);
}
.bu-mega__head span {
  min-width: 0;
}

.bu-mega__links {
  list-style: none;
  margin: 0;
  padding: 0 !important;
  display: grid;
  gap: 1px;
}

/* ---- the links ---------------------------------------------------------- */
.header-main .main-menu ul li .submenu.bu-mega li a {
  display: flex;
  align-items: center;
  /* The template's dropdown link is `justify-content: space-between`, which
     is right for its "label … chevron" row and wrong here: it pushed every
     label to the far end of its column and left the list ragged. */
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 10px;
  margin-inline-start: -10px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #5d4c37;
  /* The template capitalises every word in a dropdown link, which rewrote
     "Department of Computer Science" as "Department Of Computer Science" and
     would do worse to a Kurdish or Arabic label. The stored text is what an
     editor typed; render it. */
  text-transform: none;
  /* Department names are long — "Department of Business Administration
     (DBAD)" is wider than any column a three-column panel can give it — and
     the panel clips its overflow to keep its rounded corners. Wrapping to a
     second line is the only option that loses nothing. */
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

/* The marker: a short gold rule that appears on contact. It is the panel's
   only ornament, and it costs no layout — the 3px box is always there, only
   its opacity and scale change. */
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__links a {
  align-items: flex-start;
}
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__links a::before {
  margin-top: 4px;
}
.header-main .main-menu ul li .submenu.bu-mega li a::before {
  content: "";
  flex: 0 0 3px;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--bayan-gold, #c89a11);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__head::before,
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__foot a::before {
  content: none;
}

.header-main .main-menu ul li .submenu.bu-mega .bu-mega__links a:hover,
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__links a:focus-visible,
.header-main .main-menu ul li .submenu.bu-mega:not(.bu-mega--grouped) li a:hover,
.header-main .main-menu ul li .submenu.bu-mega:not(.bu-mega--grouped) li a:focus-visible {
  background: var(--bayan-cream, #f7f5f2);
  /* The template sets the dropdown hover to white !important, for a dark
     dropdown it no longer has. */
  color: var(--bayan-blue, #0066b3) !important;
}
.header-main .main-menu ul li .submenu.bu-mega li a:hover::before,
.header-main .main-menu ul li .submenu.bu-mega li a:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.header-main .main-menu ul li .submenu.bu-mega li a span {
  flex: 0 1 auto;
}

/* ---- the footer row ----------------------------------------------------- */
/* The section's own page, on the panel's own cream. It spans every column so
   it reads as the end of the panel rather than as one more link in the last
   group. */
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__foot {
  grid-column: 1 / -1;
  /* Bleeds to the panel's edges, so it tracks the padding rather than
     repeating the number. */
  margin: 6px calc(var(--bu-mega-pad) * -1) 0;
  padding: 0 !important;
  background: var(--bayan-cream, #f7f5f2);
  border-top: 1px solid rgba(111, 65, 0, 0.1);
  /* It carries the section's own page plus any entry that belonged to no
     group, so it is a row of links rather than a single one. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
}
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__foot a {
  gap: 8px;
  padding: 13px var(--bu-mega-pad);
  margin: 0;
  border-radius: 0;
  /* The template gives every dropdown link `width: 100%`, which stacked the
     footer's two or three links one per line instead of laying them out as
     the row this is. */
  width: auto;
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bayan-blue, #0066b3);
}
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__foot a:hover {
  background: var(--bayan-sand, #f3ece0);
}
.header-main .main-menu ul li .submenu.bu-mega .bu-mega__foot i {
  font-size: 12px;
}
/* An arrow that keeps pointing right on an Arabic page points backwards. */
[dir="rtl"] .header-main .main-menu ul li .submenu.bu-mega .bu-mega__foot i {
  transform: scaleX(-1);
}

/* Below the mega breakpoint the offcanvas carries the menu, and a panel sized
   in viewport units would otherwise still be laid out behind it. */
@media (max-width: 1399.98px) {
  .header-main .main-menu ul li .submenu.bu-mega {
    display: none;
  }
}

/* ---- the same tree in the offcanvas ------------------------------------- */
/* The desktop panel's groups exist on the phone too, but flat rather than
   behind a second tap: a section opens once and its groups and links are all
   visible. The heading is set apart by the same gold hairline the panel uses,
   at the smaller scale the drawer works in. */

.mean-nav .bu-m-group {
  padding: 0 !important;
}
.mean-nav .bu-m-group + .bu-m-group {
  margin-top: 4px;
}

.mean-nav .bu-m-group__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 4px;
  padding: 0 0 7px;
  border-bottom: 1px solid rgba(200, 154, 17, 0.4);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--header, #33200a);
  text-transform: none;
}
.mean-nav .bu-m-group__head i {
  flex: 0 0 auto;
  width: 16px;
  font-size: 13px;
  text-align: center;
  color: var(--bayan-gold-dark, #a37c0a);
}

.mean-nav .bu-m-group__links {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}
.mean-nav .bu-m-group__links > li {
  padding: 0 !important;
}
.mean-nav .bu-m-group__links a {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;
  color: #5d4c37;
}
[dir="rtl"] .mean-nav .bu-m-group__links a {
  padding: 8px 14px 8px 0;
}
.mean-nav .bu-m-group__links a:hover,
.mean-nav .bu-m-group__links a:focus-visible {
  color: var(--bayan-blue, #0066b3);
}

/* ==========================================================================
   The orbiting corner arcs (components/sections/OrbitShape.tsx).

   The template's version is a flat PNG: two faint arcs with two dots parked
   on them, looking like they are mid-journey and never moving. The dots now
   travel their arcs.

   The motion is one rotation per dot about the shared arc centre, so a dot
   cannot drift off its ring however long it runs, and the whole thing is a
   single transform per element — compositor work, no layout, no paint.
   ========================================================================== */

.bu-orbit {
  display: block;
  /* The width/height attributes give it the PNG's intrinsic size so the
     absolutely-positioned parent shrink-wraps to the same box; this only
     stops it overflowing a narrow viewport. */
  max-width: 100%;
  height: auto;
}

.bu-orbit__ring {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}

.bu-orbit__dot {
  fill: #fff;
}

.bu-orbit__arm {
  /* The origin is given in the viewBox's own units, which is what
     `transform-box: view-box` means here — without it the browser measures
     from the element's own tight bounding box (the dot) and the dot spins on
     the spot instead of travelling.
     It is a variable because the statistics band reuses this rule and its
     four arcs have four different centres; OrbitShape's two share one, so it
     sets the pair once on the `<svg>` and lets them inherit. */
  transform-box: view-box;
  transform-origin: var(--bu-orbit-cx) var(--bu-orbit-cy);
  /* alternate, because the sweep covers only the arc that is on the
     artboard: run one way and the dot would spend four fifths of the cycle
     outside it. ease-in-out so it slows at each end instead of snapping. */
  animation: bu-orbit-sweep var(--bu-orbit-period, 8s) ease-in-out infinite
    alternate;
}

@keyframes bu-orbit-sweep {
  from {
    transform: rotate(var(--bu-orbit-from, 170deg));
  }
  to {
    transform: rotate(var(--bu-orbit-to, 240deg));
  }
}

/* ---- the same arcs on the statistics band ------------------------------- */
/* components/sections/CounterOrbit.tsx, which explains where the geometry
   came from. The band's red and its arcs were one JPEG; the arcs are drawn
   now, so the red has to be stated. This is the colour that image was —
   rgb(174, 2, 28), sampled from the 55,000 pixels of flat background it had.
   It is the template's accent, not one of the crest's. */
.bu-counter-band {
  background-color: #ae021c;
  /* The containing block for the arcs. It used to come from `.bg-cover`,
     which the band no longer carries now that it has no image to cover
     with — so it is stated here rather than left to a class kept for a
     side effect. */
  position: relative;
  /* The corners are sized in pixels, so on a band shorter than one of them
     the arcs would spill past the rounded edge. Clipped, they stop at it. */
  overflow: hidden;
}
/* One window per corner, each at the source image's own scale, with the
   viewBox doing the offset — see the component. Physical `left`/`right`, not
   the logical pair: a background image does not mirror on the Kurdish and
   Arabic pages and neither should its replacement. */
.bu-counter-orbit {
  position: absolute;
  pointer-events: none;
}
.bu-counter-orbit--tl {
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
}
.bu-counter-orbit--br {
  right: 0;
  bottom: 0;
  width: 180px;
  height: 215px;
}
/* An absolutely positioned box paints over its in-flow siblings whatever its
   z-index, so the numbers need a layer of their own to sit above the arcs. */
.bu-counter-band > .counter-items {
  position: relative;
  z-index: 1;
}
/* Measured off the JPEG rather than picked: integrating one cross-section of
   a stroke gives alpha x width = 0.2 to 0.26 in the green channel, which is
   the one JPEG chroma subsampling leaves intact. Then checked the other way
   round — rasterising these rings and integrating the same rows — because a
   crisp 2px stroke and a JPEG-blurred one do not carry the same weight at
   the same nominal alpha. At 0.12 the drawn arc came out about a fifth too
   heavy; 0.1 lands on the original. */
.bu-counter-orbit__ring {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
}
.bu-counter-orbit__dot {
  fill: #fff;
}

/* Someone who has asked the system for less motion gets the original: the
   arcs and the dots, held at their starting angle. */
@media (prefers-reduced-motion: reduce) {
  .bu-orbit__arm {
    animation: none;
    transform: rotate(var(--bu-orbit-from, 0deg));
  }
}

/* ==========================================================================
   The FAQ list.

   The template's style-2 is a stack of edge-to-edge rows divided by hairlines,
   and the open one fills the full width with cream and swaps its icon for a
   heavy multiplication sign. The cream band runs past the text on both sides,
   so the open answer reads as a highlighted error rather than as the thing
   you just asked for; the rows have no edges, so six questions are a wall of
   text with lines through it.

   Separated cards instead, with room to breathe between them, and one accent:
   the crest's blue, on the open card only.

   The marker is one glyph doing both jobs. It is always a plus, and the chip
   turns 45 degrees when the card opens — which turns the plus into a cross
   and the rounded square into a rounded diamond, in one transform, and
   animates between the two states instead of cutting. There is no second
   icon and nothing to keep in sync.

   Every selector here carries `.faq-wrapper.style-2 ... .accordion-item`, and
   the depth is the point rather than habit. The template reaches the open
   button through a seven-class chain and the collapsed one through eight, so
   a shorter selector wins on the closed cards and quietly loses on the open
   one — which is what happened: the open card kept the template's
   `padding: 35px 0 35px 105px` and its cream fill while its neighbours took
   the new padding, and stood 18px taller than the reserve below expected.
   ========================================================================== */

.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item {
  background: #fff;
  border: 1px solid rgba(51, 32, 10, 0.09);
  border-radius: 20px;
  margin-bottom: 18px;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item:last-child {
  margin-bottom: 0;
}

/* Open, read from the button rather than from the panel: the button's class
   flips on click, while the panel is `.collapsing` for 350ms before it is
   `.show`, and keying off that would leave the card grey for the length of
   every animation. */
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(0, 102, 179, 0.22);
  box-shadow: 0 14px 36px rgba(0, 102, 179, 0.1);
}

.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button,
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button.collapsed {
  gap: 22px;
  /* The template reserves 105px on one side for an absolutely positioned
     glyph. The chip below is in the flow instead, so the padding is even and
     mirrors on the Kurdish and Arabic pages without a second rule. */
  padding: 26px 28px;
  background: transparent;
  color: var(--bayan-brown-deep, #33200a);
  font-size: 18px;
  line-height: 1.55;
  /* The template capitalises every word, which rewrites stored questions. */
  text-transform: none;
  transition: color 0.35s ease;
}
/* The open question takes the accent too, so the card reads as one object. */
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button:not(.collapsed) {
  color: var(--bayan-blue, #0066b3);
}

/* The chip, at the far end of the row. */
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button::before,
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button.collapsed::before {
  content: "\f067";
  /* The template ships Font Awesome 5 Pro; the Free fallback carries this
     glyph only at weight 900, which Pro also has. */
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  /* Out of the template's absolute placement and into the flex row, so it
     sits at the trailing edge whichever way the text runs. */
  position: static;
  order: 1;
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(0, 102, 179, 0.09);
  color: var(--bayan-blue, #0066b3);
  font-size: 17px;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease,
    color 0.35s ease;
}
/* One turn: square to diamond, plus to cross. */
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button:not(.collapsed)::before {
  transform: rotate(45deg);
  background: var(--bayan-blue, #0066b3);
  color: #fff;
}

/* The template tints the open panel; the card already says which one is open. */
.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-collapse.show {
  background-color: transparent;
}

.faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-body {
  /* Level with the question rather than tucked under it. The template's
     -10px pull is what used to make the list stand 10px taller mid-animation
     than at rest — see the reserve below, which no longer has that to
     absorb. */
  margin-top: 0;
  padding: 0 28px 28px;
  color: rgba(51, 32, 10, 0.72);
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 575px) {
  .faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item {
    border-radius: 16px;
    margin-bottom: 12px;
  }
  .faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button,
  .faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button.collapsed {
    gap: 14px;
    padding: 20px;
    font-size: 16px;
  }
  .faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button::before,
  .faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-button.collapsed::before {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
  .faq-wrapper.style-2 .faq-content .faq-items .accordion .accordion-item .accordion-body {
    padding: 0 20px 20px;
  }
}

/* ==========================================================================
   The FAQ list, at one height.

   Opening a question grew the accordion by the height of its answer, and
   because the row is `align-items: stretch` with the picture sized to the
   questions beside it, the picture grew with it — so a click re-cropped the
   photo and moved every section below by up to 70px. Answers here run 50 to
   80px; the page swung between 2485 and 2555.

   The markup carries a hidden second copy of the list whose answers are
   stacked in a single cell, which makes it exactly as tall as the accordion
   at its tallest. Both sit in one grid cell, so the taller decides: the
   height is now the same whichever question is open, and the picture holds
   still. The cost is up to 80px of space below the last question when a short
   answer is showing.

   Measured rather than reserved by hand — the alternative was a number in
   this file that the next Kurdish or Arabic answer would have made wrong.
   ========================================================================== */

.bu-faq-steady {
  display: grid;
}
.bu-faq-steady > * {
  grid-area: 1 / 1;
  /* Both lists start at the top of the cell; the taller one sets its height.
     Without this the real accordion would stretch to the ghost and its last
     border would drift away from its last question. */
  align-self: start;
}
.bu-faq-steady__ghost {
  /* `visibility`, not `display: none`: a box with no display has no height to
     lend. Hidden this way it is also out of the tab order and unread by
     screen readers, which is the rest of what it needs to be. */
  visibility: hidden;
  pointer-events: none;
}
/* Every answer in the same cell, so the stack is one answer tall — the
   longest one. */
.bu-faq-steady__answers {
  display: grid;
}
/* And one answer tall as the animation sees it, not as the finished list
   does — the two differ by 10px.
 *
 * `.accordion-body` carries `margin-top: -10px`; the template tucks the
 * answer up under its question. At rest that margin collapses out through
 * `.accordion-collapse`, so an open item stands at header + panel - 10. But
 * `.collapsing` sets `overflow: hidden`, and a box that hides its overflow
 * keeps its children's margins inside — so for the length of a swap the panel
 * occupies the whole 110 it was pinned to.
 *
 * The first frames of a swap are therefore the tallest the list ever is: the
 * closing panel still holds its full height while the opening one is at zero.
 * Reserving the resting height left those frames to spill, and the picture
 * beside the questions flicked 845 -> 855 -> 845 on every click — a sixth of
 * a second, easy to see and impossible to catch by measuring once the
 * animation has finished.
 *
 * Cancelling the tuck here measures each answer the way the transition pins
 * it. The reserve becomes the tallest the list ever gets rather than the
 * tallest it comes to rest at, and the 10px it adds is the price of the
 * picture never moving. */
/* The template's own rule is six classes deep, so this has to reach at least
   as far to outrank it. */
.faq-wrapper
  .faq-content
  .faq-items
  .accordion
  .accordion-item
  .bu-faq-steady__answers
  .accordion-body {
  margin-top: 0;
}
.bu-faq-steady__answers > * {
  grid-area: 1 / 1;
}

/* ==========================================================================
   Academic staff cards
   ==========================================================================

   The template's version was not a card at all: a bare `<img>` with the name
   under it. That works when a designer has supplied eight portraits shot to
   one brief. These are thirty-one identity photographs collected over years —
   four different aspect ratios, backgrounds in white, grey and beige, some
   head-and-shoulders and some full torso, and several people with no
   photograph at all. Put side by side with nothing around them they read as a
   folder of scans rather than a faculty.

   So the card does the normalising the photographs never had:

   - one aspect ratio for every portrait, cropped to the top so a head is
     never cut off in favour of a chest
   - a neutral ground behind every one, so a white cut-out and a grey studio
     backdrop stop competing
   - initials where there is no photograph
   - a fixed number of lines for the role, so the grid keeps its rhythm
     however long a job title runs — and these run long
   ========================================================================== */

.bu-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 26px;
}

.bu-staff {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(51, 32, 10, 0.05), 0 8px 22px rgba(51, 32, 10, 0.07);
  text-transform: none;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.bu-staff:hover,
.bu-staff:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(51, 32, 10, 0.06), 0 22px 46px rgba(51, 32, 10, 0.16);
}

/* ---- the portrait -------------------------------------------------------- */

.bu-staff__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* The ground every portrait sits on. Warm rather than white, because a
     white ground behind a white-background cut-out makes the shoulders
     disappear and the head float. */
  background: linear-gradient(
    180deg,
    var(--bayan-sand, #f3ece0) 0%,
    var(--bayan-cream, #f7f5f2) 100%
  );
}

.bu-staff__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop from the top: these are identity photographs, so the face is in the
     upper half and the bottom is jacket. */
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bu-staff:hover .bu-staff__frame img,
.bu-staff:focus-visible .bu-staff__frame img {
  transform: scale(1.04);
}

.bu-staff__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bayan-blue, #0066b3);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.55;
}
[dir="rtl"] .bu-staff__initials {
  letter-spacing: 0;
}

/* ---- the department, across the foot of the portrait --------------------- */
/* Gold on a fade rather than gold on the photograph: these portraits end in
   whatever the person was wearing, and a label straight onto a light shirt
   disappears. The fade is the card's own ground coming up to meet it. */

.bu-staff__dept {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(247, 245, 242, 0) 0%,
    rgba(247, 245, 242, 0.86) 46%,
    rgba(247, 245, 242, 0.97) 100%
  );
  color: var(--bayan-gold-dark, #a5820e);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  /* One line: these names run to "International Relations" and a second line
     would eat the portrait. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir="rtl"] .bu-staff__dept {
  letter-spacing: 0;
}

/* ---- the name and the contact, on the crest's blue ----------------------- */

.bu-staff__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
  background: var(--bayan-blue, #0066b3);
  text-align: center;
  transition: background-color 0.35s ease;
}
.bu-staff:hover .bu-staff__body,
.bu-staff:focus-visible .bu-staff__body {
  background: var(--bayan-blue-dark, #004aac);
}

.bu-staff__name {
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

/* An address or, where there is none, the job title. Both are long and both
   have to fit one card: an email breaks at the @, and a title that would run
   past two lines is clamped so every card in a row keeps the same height. */
.bu-staff__contact {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 575px) {
  .bu-staff-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }
  .bu-staff__body {
    padding: 12px 14px 16px;
  }
  .bu-staff__name {
    font-size: 14.5px;
  }
  .bu-staff__role {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   Rendered prose (components/sections/RichText.tsx)
   ==========================================================================
   The marks an editor can type, and what each looks like on the page. Sizes
   inherit from the section wherever possible so the same prose reads
   correctly in a narrow rail and in a full-width article.
   ========================================================================== */

.bu-rt > *:first-child {
  margin-block-start: 0;
}
.bu-rt > *:last-child {
  margin-block-end: 0;
}

.bu-rt__h2 {
  margin: 34px 0 12px;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bayan-brown-deep, #33200a);
  text-transform: none;
}
.bu-rt__h3 {
  margin: 26px 0 10px;
  font-size: 1.12em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bayan-brown-deep, #33200a);
  text-transform: none;
}

.bu-rt__ul,
.bu-rt__ol {
  margin: 0 0 18px;
  padding-inline-start: 1.35em;
}
.bu-rt__ul li,
.bu-rt__ol li {
  margin-bottom: 7px;
  line-height: 1.75;
}
.bu-rt__ul {
  list-style: disc;
}
.bu-rt__ol {
  list-style: decimal;
}

/* A quotation, marked by a rule on the leading edge rather than by quote
   glyphs — the text may be Kurdish or Arabic, where the glyphs differ. */
.bu-rt__quote {
  margin: 22px 0;
  padding: 2px 0 2px 18px;
  border-inline-start: 3px solid var(--bayan-gold, #c89a11);
  color: rgba(51, 32, 10, 0.75);
  font-size: 1.03em;
  font-style: italic;
  line-height: 1.75;
}
[dir="rtl"] .bu-rt__quote {
  padding: 2px 18px 2px 0;
}

.bu-rt__rule {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid rgba(51, 32, 10, 0.14);
  opacity: 1;
}

.bu-rt__link {
  color: var(--bayan-blue, #0066b3);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-transform: none;
}
.bu-rt__link:hover,
.bu-rt__link:focus-visible {
  color: var(--bayan-blue-dark, #004aac);
  text-decoration-thickness: 2px;
}

.bu-rt__figure {
  margin: 26px 0;
}
.bu-rt__figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.bu-rt__figure figcaption {
  margin-top: 9px;
  color: rgba(51, 32, 10, 0.55);
  font-size: 0.88em;
  line-height: 1.5;
}

.bu-rt__inline-img {
  max-height: 1.4em;
  width: auto;
  vertical-align: text-bottom;
  border-radius: 3px;
}