/* ============================================================================
   page-content.css
   Colourful styling for DB-driven content (scoped to .cms-content so it never
   affects the header, footer, or other theme areas).
   Palette: blue #1c5fae (primary) · orange #f0a23b (accent) · green #15a07a · red #d9534f
   ========================================================================== */

.cms-content { color:#333; font-size:15px; line-height:1.75; }

/* Headings */
.cms-content h2,
.cms-content h3,
.cms-content h4 { color:#1c5fae; font-weight:700; }
.cms-content h3 { border-left:4px solid #f0a23b; padding-left:12px; margin:0 0 16px; }

/* Links */
.cms-content a        { color:#1c5fae; transition:color .2s ease; }
.cms-content a:hover  { color:#f0a23b; }

/* Unordered lists — orange angle markers */
.cms-content ul        { list-style:none; padding-left:0; }
.cms-content ul:not(.nav) > li   { position:relative; padding-left:26px; margin-bottom:9px; }
.cms-content ul:not(.nav) > li:before {
  content:"\f105";               /* fa-angle-right */
  font-family:FontAwesome;
  color:#f0a23b; font-weight:bold;
  position:absolute; left:9px; top:0;
}

/* Ordered lists — blue numerals */
.cms-content ol        { padding-left:22px; }
.cms-content ol > li   { margin-bottom:9px; }
.cms-content ol > li::marker { color:#1c5fae; font-weight:700; }

/* Tables */
.cms-content table.table { width:100%; margin-bottom:0; }
.cms-content table.table thead tr,
.cms-content table.table thead th {
  background:#1c5fae !important; color:#fff !important; border-color:#1c5fae !important;
  font-weight:600;
}
.cms-content table.table-striped tbody tr:nth-child(odd) { background:#f4f8fd; }
.cms-content table.table tbody tr:hover { background:#fdf3e6; }
.cms-content table.table td,
.cms-content table.table th { vertical-align:middle; }

/* Panels (Vision / Mission / Core Values) — alternating accent headers */
.cms-content .panel { border-radius:6px; overflow:hidden; border:1px solid #e6e6e6;
                      box-shadow:0 1px 4px rgba(0,0,0,.05); }
.cms-content .panel-heading                   { background:#1c5fae; }
.cms-content .panel:nth-of-type(2) .panel-heading { background:#15a07a; }
.cms-content .panel:nth-of-type(3) .panel-heading { background:#f0a23b; }
.cms-content .panel-heading .panel-title      { color:#fff; }

/* Document link lists (certificates / awards) */
.cms-content .list-group-item        { transition:background .2s ease; }
.cms-content .list-group-item:hover  { background:#f4f8fd; }
.cms-content .fa-file-pdf-o          { color:#d9534f !important; }

/* Principal figure (floated photo with text wrap) */
.cms-content .principal-figure img   { border:4px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.cms-content .principal-figure figcaption strong { color:#1c5fae; }

/* ============================================================================
   Certificate / Affiliation cards (creative grid for document pages)
   ========================================================================== */
.cert-grid { margin-top:6px; }
.cert-grid .cert-card {
  display:block; height:100%; background:#fff; border:1px solid #e8e8e8; border-radius:10px;
  padding:32px 20px 26px; text-align:center; margin-bottom:26px; text-decoration:none;
  position:relative; overflow:hidden; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.cert-grid .cert-card:before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:#1c5fae;
  transform:scaleX(0); transition:transform .25s ease;
}
.cert-grid .cert-card:hover { box-shadow:0 12px 28px rgba(0,0,0,.13); transform:translateY(-6px); border-color:#1c5fae; }
.cert-grid .cert-card:hover:before { transform:scaleX(1); }

.cert-grid .cert-icon {
  width:76px; height:76px; line-height:76px; border-radius:50%; display:block; margin:0 auto 16px;
  background:#eaf1fb; color:#1c5fae; font-size:31px; transition:all .25s ease;
}
.cert-grid .cert-card:hover .cert-icon { background:#1c5fae; color:#fff; transform:rotate(360deg); }

.cert-grid .cert-year  { font-size:17px; font-weight:700; color:#1c4f8f; margin:0 0 4px; line-height:1.3; }
.cert-grid .cert-label { display:block; font-size:12.5px; color:#8a8a8a; margin:0 0 18px; min-height:32px; }
.cert-grid .cert-btn {
  display:inline-block; padding:7px 20px; border-radius:30px; font-size:12.5px; font-weight:600;
  background:#f0a23b; color:#fff !important; transition:background .25s ease;
}
.cert-grid .cert-card:hover .cert-btn { background:#1c5fae; }
.cert-grid .cert-btn .fa { color:#fff !important; }

/* ============================================================================
   Certificate / Affiliation list (event-style rows with coloured date boxes)
   ========================================================================== */
.cert-list .cert-item {
  display:flex; align-items:stretch; background:#fff;
  border:1px solid #e6e6e6; border-radius:8px; overflow:hidden;
  margin-bottom:16px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cert-list .cert-item:hover { box-shadow:0 8px 20px rgba(0,0,0,.10); transform:translateY(-2px); border-color:#cdd9ea; }

.cert-list .cert-datebox {
  flex:0 0 90px; width:90px; color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 6px;
}
.cert-list .cert-datebox .cert-year { font-size:18px; font-weight:800; line-height:1.1; }
.cert-list .cert-datebox .cert-tag  { font-size:10.5px; text-transform:uppercase; letter-spacing:1px; margin-top:6px; opacity:.95; }

/* cycling colours, mirroring the template's event boxes */
.cert-list .cert-item:nth-child(4n+1) .cert-datebox { background:#1c5fae; }
.cert-list .cert-item:nth-child(4n+2) .cert-datebox { background:#f0a23b; }
.cert-list .cert-item:nth-child(4n+3) .cert-datebox { background:#e8505b; }
.cert-list .cert-item:nth-child(4n)   .cert-datebox { background:#15a07a; }

.cert-list .cert-body  { flex:1 1 auto; padding:13px 18px; }
.cert-list .cert-title { margin:0 0 5px; font-size:16px; font-weight:700; line-height:1.35; }
.cert-list .cert-title a       { color:#23282d; }
.cert-list .cert-title a:hover { color:#1c5fae; }
.cert-list .cert-meta  { margin:0 0 7px; font-size:13px; color:#8a8a8a; }
.cert-list .cert-meta .fa { color:#d9534f; margin-right:6px; }
.cert-list .cert-link  { font-size:13px; font-weight:600; color:#1c5fae; }
.cert-list .cert-link:hover { color:#f0a23b; }
.cert-list .cert-link .fa { margin-left:4px; }

/* ============================================================================
   Organogram (Organization Structure) + staff photos
   ========================================================================== */
.org-chart { text-align:center; }
.org-chart .org-title { color:#d4145a; font-weight:800; letter-spacing:.5px; margin:0 0 22px; font-size:20px; }
.org-chart .org-box {
  display:inline-block; border-radius:6px; padding:9px 20px; min-width:150px;
  font-weight:700; color:#13335a; font-size:14px; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.org-chart .org-box small { display:block; font-weight:400; font-size:11px; }
.org-chart .org-box a { color:inherit; text-decoration:none; }
.org-chart .org-box a:hover { text-decoration:underline; }
.org-chart .org-conn { width:2px; height:16px; background:#c2c2c2; margin:0 auto; }
.org-chart .org-spine { display:inline-flex; flex-direction:column; align-items:center; }
.org-chart .org-branches { display:flex; justify-content:center; align-items:flex-start; gap:24px; margin-top:14px; flex-wrap:wrap; }
.org-chart .org-col { display:flex; flex-direction:column; align-items:center; gap:10px; }
.org-chart .org-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Staff photo / avatar (Non-Teaching Staff) */
.staff-photo  { width:58px; height:58px; border-radius:50%; object-fit:cover; border:2px solid #e2e2e2; }
.staff-avatar { width:58px; height:58px; border-radius:50%; background:#eaf1fb; color:#1c5fae;
  display:inline-flex; align-items:center; justify-content:center; font-size:24px; }