/* Masar University — colour accents for the inner pages (owner review, 29 Sep 2026).
   The home page carries the brand colours in bands and tiles; the inner pages were mostly white cards.
   This layer adds the same palette to their cards and sections, with meaning where there is one:
   - each college has a colour (Management navy, IT and AI teal, Digital Media bronze, E-Learning green);
   - the degree reads from its badge (bachelor light, master navy and gold, diploma bronze);
   - fees are gold.
   CSS only: no markup or text changes, so the English and French pages follow automatically. */

:root {
  --mu-col-management: var(--mu-navy);
  --mu-col-management-tint: #E8EEF7;
  --mu-col-it: var(--mu-teal-700);
  --mu-col-it-tint: var(--mu-teal-100);
  --mu-col-media: #9A6238;
  --mu-col-media-tint: #F6EDE5;
  --mu-col-elearning: #23704F;
  --mu-col-elearning-tint: #E4F2EB;
  --mu-gold-tint: #FFF4D1;
}

/* ---------- Programme cards: a header band in the college colour ---------- */
[data-college] { --mu-col: var(--mu-col-management); --mu-col-tint: var(--mu-col-management-tint); }
[data-college="it"] { --mu-col: var(--mu-col-it); --mu-col-tint: var(--mu-col-it-tint); }
[data-college="media"] { --mu-col: var(--mu-col-media); --mu-col-tint: var(--mu-col-media-tint); }
[data-college="elearning"] { --mu-col: var(--mu-col-elearning); --mu-col-tint: var(--mu-col-elearning-tint); }

.mu-programs .mu-program-card {
  overflow: hidden;
  padding-top: 0;
  border-color: color-mix(in srgb, var(--mu-col) 22%, var(--mu-border));
  background: linear-gradient(180deg, var(--mu-col-tint) 0, #fff 7.5rem);
}
.mu-programs .mu-program-card:hover { border-color: var(--mu-col); }
.mu-programs .mu-program-card__top {
  margin-inline: -1.25rem;
  margin-bottom: .35rem;
  padding: .7rem 1.25rem;
  background: var(--mu-col);
}
.mu-programs .mu-program-card__code { color: rgba(255, 255, 255, .88); }
.mu-programs .mu-program-card__level { background: #fff; color: var(--mu-col); }
.mu-programs .mu-program-card__level--master { background: var(--mu-gold); color: var(--mu-navy-950); }
.mu-programs .mu-program-card__level--diploma { background: var(--mu-gold-tint); color: var(--mu-bronze-700); }
.mu-programs .mu-program-card__title a:hover { color: var(--mu-col); }
.mu-programs .mu-program-card__college { display: flex; align-items: flex-start; gap: .45rem; color: var(--mu-col); font-weight: 600; }
/* the dot sits on the first line when a long college name wraps */
.mu-programs .mu-program-card__college::before {
  content: "";
  flex: none;
  width: .55rem;
  height: .55rem;
  margin-top: .62em;
  margin-top: calc((1lh - .55rem) / 2);
  border-radius: 50%;
  background: var(--mu-col);
}
.mu-programs .mu-program-card__meta .ti { color: var(--mu-col); }
.mu-program-card__meta > span:last-child {
  margin-inline-start: auto;
  padding: .2rem .7rem;
  border-radius: var(--mu-radius-pill);
  background: var(--mu-gold-tint);
  color: var(--mu-bronze-700);
  font-weight: 700;
}
.mu-program-card__meta > span:last-child .ti { color: var(--mu-bronze-700) !important; }

/* the college filter chips carry the same colours */
.mu-chip-btn[data-filter-key="college"][data-filter-value="management"] { --mu-col: var(--mu-col-management); }
.mu-chip-btn[data-filter-key="college"][data-filter-value="it"] { --mu-col: var(--mu-col-it); }
.mu-chip-btn[data-filter-key="college"][data-filter-value="media"] { --mu-col: var(--mu-col-media); }
.mu-chip-btn[data-filter-key="college"][data-filter-value="elearning"] { --mu-col: var(--mu-col-elearning); }
.mu-chip-btn[data-filter-key="college"]:not([data-filter-value="all"])::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-inline-end: .45rem;
  border-radius: 50%;
  background: var(--mu-col);
  vertical-align: .08em;
}
.mu-chip-btn[data-filter-key="college"]:not([data-filter-value="all"])[aria-pressed="true"] { border-color: var(--mu-col); background: var(--mu-col); color: #fff; }
.mu-chip-btn[data-filter-key="college"][aria-pressed="true"]::before { background: #fff; }

/* ---------- Policy cards: a side stripe and icon in a rotating brand colour ---------- */
.mu-policy-list > li { --mu-acc: var(--mu-teal-700); --mu-acc-tint: var(--mu-teal-100); }
.mu-policy-list > li:nth-child(3n+2) { --mu-acc: var(--mu-navy); --mu-acc-tint: #E8EEF7; }
.mu-policy-list > li:nth-child(3n) { --mu-acc: var(--mu-bronze-700); --mu-acc-tint: var(--mu-gold-tint); }
.mu-policy-card {
  border-inline-start: 5px solid var(--mu-acc, var(--mu-teal-700));
  background: linear-gradient(to left, var(--mu-acc-tint, #fff), #fff 55%);
}
[dir="ltr"] .mu-policy-card { background: linear-gradient(to right, var(--mu-acc-tint, #fff), #fff 55%); }
.mu-policy-list .mu-policy-card__title { color: var(--mu-acc); }
.mu-policy-list > li:nth-child(3n+2) .mu-policy-card__title { color: var(--mu-navy); }
.mu-policy-card:hover { border-color: var(--mu-acc, var(--mu-teal)); }
.mu-policy-list .mu-policy-card .mu-icon-tile { background: var(--mu-acc); color: #fff; }
.mu-policy-list > li:nth-child(3n+2) .mu-policy-card .mu-icon-tile { color: var(--mu-gold); }

/* ---------- Feature cards (college vision/mission, scholarships, calendar, careers, policies) ---------- */
.mu-feature-grid > li { --mu-acc: var(--mu-teal); }
.mu-feature-grid > li:nth-child(3n+2) { --mu-acc: var(--mu-navy); }
.mu-feature-grid > li:nth-child(3n) { --mu-acc: var(--mu-gold); }
.mu-feature { border-top: 4px solid var(--mu-acc, var(--mu-teal)); }
.mu-feature:hover { border-color: var(--mu-acc, var(--mu-teal)); border-top-color: var(--mu-acc, var(--mu-teal)); }

/* ---------- Board of Directors: navy cards with gold, set apart from the staff cards (owner) ---------- */
.mu-people--lead { gap: 1.5rem; }
.mu-people--lead .mu-person {
  padding: .6rem;
  border: 1px solid rgba(245, 184, 0, .55);
  border-radius: calc(var(--mu-radius-lg) + 6px);
  background:
    radial-gradient(22rem 14rem at 100% 100%, rgba(4, 138, 164, .35), transparent 70%),
    linear-gradient(160deg, var(--mu-navy-800), var(--mu-navy-950));
  box-shadow: 0 18px 40px rgba(0, 27, 61, .28);
}
.mu-people--lead .mu-person:hover { box-shadow: 0 24px 48px rgba(0, 27, 61, .36); }
.mu-people--lead .mu-person__photo {
  overflow: hidden;
  border-radius: var(--mu-radius-lg);
  background: #fff;
  box-shadow: 0 0 0 2px var(--mu-gold);
}
.mu-people--lead .mu-person__photo::after { display: none; }
.mu-people--lead .mu-person__body { padding: 1rem .6rem .7rem; }
.mu-people--lead .mu-person__name { color: #fff; font-size: 1.12rem; }
.mu-people--lead .mu-person__name::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: .5rem auto .55rem;
  border-radius: 3px;
  background: var(--mu-gold);
}
.mu-people--lead .mu-person__role { color: var(--mu-on-dark-muted); }

/* ---------- Side boxes, contact tiles, forms ---------- */
.mu-aside__box { border-top: 4px solid var(--mu-teal); }
.mu-aside__box + .mu-aside__box { border-top-color: var(--mu-navy); }
.mu-contact-tile { border-inline-start: 4px solid var(--mu-teal); }
.mu-contact-tiles > li:nth-child(even) .mu-contact-tile,
.mu-contact-tiles > .mu-contact-tile:nth-child(even) { border-inline-start-color: var(--mu-gold); }
.mu-form-card { border-top: 5px solid var(--mu-gold); }

/* ---------- Sections: tinted bands carry a light teal wash, like the home page ---------- */
.mu-band--tint {
  background:
    radial-gradient(60rem 22rem at 100% 0, rgba(4, 138, 164, .08), transparent 70%),
    radial-gradient(50rem 20rem at 0 100%, rgba(245, 184, 0, .07), transparent 70%),
    var(--mu-surface-2);
}