/*
 * Pearl template - small additions to site.css (the college website design, kept unchanged), for parts of
 * the OPTICSMS school sites that site.css has no rule for.
 */
/* logo initials when a school has no logo yet */
.pl-mark { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; background: var(--p); color: #fff; font: 700 17px var(--sans); }
@media (max-width: 640px) { .pl-mark { width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; } }
/* highlights use the programme cards (no link) */
.prog-list .pl-hl { height: 100%; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--p); padding: 22px 22px 18px; }
.prog-list .pl-hl p { color: var(--muted); margin: 0; }
/* the portal panel sits over the slideshow only on wide screens */
.adm .btn { width: 100%; }
.hero-plain .adm-wrap { bottom: 0; }
/* notices strip: news items read as normal text */
.notes h2 { color: var(--ink); }
.notes li a span { flex: 1; }
/* contact: the right-hand box */
.pl-visit .links-row { gap: 10px; margin: 6px 0 16px; }
.pl-visit .btn .ic, .btn .ic { flex: 0 0 auto; }
/* the latest-news pop-up body */
.pop-msg { margin: 0 0 12px; }
/* links inside the footer contact lines */
.ft-contact p a, .ft-contact p span a { color: #ECEBFA; }
/* copied-link message */
.share [data-copy].is-done::after { content: ' (copied)'; color: var(--muted); text-decoration: none; }
/* school logos are often wide: keep their shape */
.brand img { width: auto; height: 52px; max-width: 220px; }
@media (max-width: 640px) { .brand img { height: 44px; max-width: 150px; } }
/* the slide-in menu sits above its dimmed backdrop (the sticky header otherwise keeps it underneath) */
body.nav-open .pl-head, body.nav-open .hd { z-index: 70; }
/* utility bar on phones: one line */
.ut a { white-space: nowrap; }
@media (max-width: 640px) { .ut-in { gap: 10px; } .ut-links { gap: 14px; } }
/* menu links stay on one line; long school names wrap instead */
.nav > ul > li > a { white-space: nowrap; }
@media (min-width: 1241px) { .nav > ul > li > a { padding: 10px 8px; } .nav { gap: 12px; } .brand strong { width: auto; max-width: 240px; } .brand img { max-width: 170px; } }
/* a long menu (6+ links): the Portal login button stays in the top bar, so the links fit on one line */
@media (min-width: 1241px) { .pl-menu-long .nav-cta { display: none; } .pl-menu-long .brand strong { max-width: 210px; } }

/* ======================================================================
   Header styles (Website control > Look > Header style, saved as pl_header)
   standard  utility bar, white header, menu on the right (site.css as supplied)
   masthead  name and logo in the middle, menu on a coloured bar underneath
   band      the header in the school's main colour, light links
   over      see-through over the home-page slideshow, solid once you scroll
   slim      no utility bar; one slim header with search and Portal login
   boxed     the header floats as a white box over the top of the page
   The utility bar and header sit in .pl-head, which sticks to the top (only the header stays in view).
   ====================================================================== */
.pl-head { position: sticky; top: 0; z-index: 40; }
.pl-head .hd { position: relative; top: auto; background: var(--pl-hd, #fff); }
.pl-head .ut { background: var(--pl-ut, var(--ink)); }
@media (min-width: 1241px) {
  .pl-head .nav > ul > li > a { color: var(--pl-link, var(--ink)); }
  .pl-head .nav > ul > li > a:hover, .pl-head .nav > ul > li > a[aria-current="page"] { color: var(--p); }
  .pl-head .brand { color: var(--pl-link, var(--ink)); }
}
.pl-head.is-stuck .hd { box-shadow: 0 8px 22px rgba(20,16,74,.10); }

/* masthead */
.mast-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 104px; }
.mast-in .brand { margin: 0; flex-direction: column; text-align: center; gap: 6px; }
.mast-in .brand img { height: 64px; max-width: 240px; }
.mast-in .brand .pl-mark { width: 60px; height: 60px; flex-basis: 60px; }
.mast-in .brand strong { font-size: 22px; max-width: 420px; width: auto; }
.mast-side { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: var(--muted); font-weight: 600; min-width: 0; }
.mast-side > a:not(.btn), .mast-side > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.mast-side > a:not(.btn):hover { color: var(--p); }
.mast-r { flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; }
.mast-bar { background: var(--pl-mast, var(--ink)); }
@media (min-width: 1241px) {
  .mast-bar .nav { justify-content: center; min-height: 52px; }
  .mast-bar .nav > ul > li > a { color: #fff !important; padding: 15px 14px; }
  .mast-bar .nav > ul > li > a:hover { color: var(--acc) !important; }
  .mast-bar .nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--acc); }
  .mast-bar .nav-cta { display: none; }
  .plh-masthead .nav-btn { display: none; }
}
@media (max-width: 1240px) {
  .mast-in { grid-template-columns: 1fr auto; min-height: 84px; }
  .mast-in > .mast-side:first-child { display: none; }
  .mast-in .brand { flex-direction: row; text-align: left; }
  .mast-in .brand img { height: 52px; } .mast-in .brand strong { font-size: 18px; }
  .mast-r .btn { display: none; }
}

/* colour band */
.plh-band .hd { border-bottom: 0; }
.plh-band .brand small { color: rgba(255,255,255,.75); }
.plh-band .brand strong { color: var(--pl-link); }
.plh-band .pl-mark { background: #fff; color: var(--p); }
.plh-band .nav-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
@media (min-width: 1241px) {
  .plh-band .nav > ul > li > a:hover, .plh-band .nav > ul > li > a[aria-current="page"] { color: var(--acc); }
  .plh-band .nav-cta .btn { background: var(--acc); border-color: var(--acc); color: var(--ink); }
  .plh-band .nav-cta .btn:hover { background: #fff; border-color: #fff; }
}

/* over the slideshow (home page with pictures only) */
.pl-head.is-over:not(.is-stuck) { position: absolute; left: 0; right: 0; top: 0; }
.pl-head.is-over:not(.is-stuck) .ut { background: rgba(10,8,40,.45); }
.pl-head.is-over:not(.is-stuck) .hd { background: linear-gradient(180deg, rgba(10,8,40,.6), rgba(10,8,40,0)); border-bottom: 0; }
.pl-head.is-over:not(.is-stuck) .brand strong { color: #fff; }
.pl-head.is-over:not(.is-stuck) .brand small { color: rgba(255,255,255,.8); }
.pl-head.is-over:not(.is-stuck) .nav-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
@media (min-width: 1241px) {
  .pl-head.is-over:not(.is-stuck) .nav > ul > li > a { color: #fff; }
  .pl-head.is-over:not(.is-stuck) .nav > ul > li > a:hover, .pl-head.is-over:not(.is-stuck) .nav > ul > li > a[aria-current="page"] { color: var(--acc); }
}
.pl-head.is-over.is-stuck { position: fixed; left: 0; right: 0; top: 0; }
.pl-head.is-over.is-stuck .ut { display: none; }
body.has-over .slide-in { padding-top: 150px; }

/* slim */
.plh-slim .hd-in { min-height: 66px; }
.plh-slim .brand img { height: 42px; } .plh-slim .pl-mark { width: 42px; height: 42px; flex-basis: 42px; font-size: 14px; }
.plh-slim .brand strong { font-size: 16.5px; } .plh-slim .brand small { display: none; }
@media (min-width: 1241px) {
  .plh-slim .nav-search { display: flex !important; } .plh-slim .nav-search input { width: 120px; height: 38px; }
  .plh-slim .pl-menu-long .nav-search { display: none !important; }
  .plh-slim .pl-menu-long .nav-cta { display: flex; }
}

/* floating box */
.plh-boxed .hd { background: transparent; border-bottom: 0; }
.plh-boxed .hd-in { background: var(--pl-hd, #fff); margin-top: 14px; padding: 0 22px; border-top: 4px solid var(--p); box-shadow: 0 16px 36px rgba(20,16,74,.16); min-height: 76px; }
.plh-boxed.is-stuck .hd-in { margin-top: 6px; }
.plh-body-boxed main > section:first-child { margin-top: -60px; }
.plh-body-boxed main > .band:first-child { padding-top: 104px; }
.plh-body-boxed main > .hero:first-child .slide-in { padding-top: 120px; }
@media (max-width: 640px) { .plh-boxed .hd-in { margin-top: 8px; padding: 0 12px; } .plh-body-boxed main > section:first-child { margin-top: -50px; } }

@media (max-width: 640px) { .mast-in .brand img { height: 44px; max-width: 150px; } .mast-in .brand strong { font-size: 15.5px; } .mast-in { min-height: 70px; gap: 12px; } }
/* colour band: keep the logo readable on the coloured bar */
.plh-band .brand img { background: #fff; padding: 4px 6px; }

/* ======================================================================
   The school's own home sections (Website control > Home page; templates/pearltm/blocks.php)
   Backgrounds: .pl-bg-plain (the page), .pl-bg-tint (a white band), .pl-bg-brand (the school colour)
   ====================================================================== */
.pl-bg-tint { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pl-bg-brand { background: var(--p); color: #fff; }
.pl-bg-brand .sec-t, .pl-bg-brand h2, .pl-bg-brand .lead { color: #fff; }
.pl-bg-brand .prose, .pl-bg-brand .prose a { color: #fff; }
.sec.pl-bg-tint, .sec.pl-bg-brand, .pl-bg-tint + .sec, .pl-bg-brand + .sec, .stats + .sec, .pl-cta + .sec, .notes + .sec { padding-top: 72px; }
.pl-blk-lead { max-width: 70ch; margin-top: -8px; margin-bottom: 26px; color: var(--muted); font-size: 18px; }
.pl-bg-brand .pl-blk-lead { color: rgba(255,255,255,.88); }
.pl-blk-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
/* text and picture */
.pl-tp { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.pl-tp.no-img { grid-template-columns: 1fr; max-width: 860px; }
.pl-tp-left .pl-tp-img { order: -1; }
.pl-tp-text .prose p { max-width: 68ch; }
@media (max-width: 900px) { .pl-tp { grid-template-columns: 1fr; gap: 28px; } .pl-tp-left .pl-tp-img { order: 0; } }
/* call to action */
.pl-cta { padding: 48px 0; background: var(--ink); color: #fff; }
.pl-cta-brand { background: var(--p); }
.pl-cta-tint { background: var(--ink); }
.pl-cta-plain { background: #fff; color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pl-cta-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pl-cta h2 { color: inherit; font-size: clamp(24px, 2.6vw, 30px); }
.pl-cta-plain h2 { color: var(--ink); }
.pl-cta p { margin: 6px 0 0; opacity: .9; max-width: 62ch; }
.pl-cta-act { display: flex; gap: 10px; flex-wrap: wrap; }
/* numbers */
.pl-stats-t { color: #fff; font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 22px; }
.pl-stats-t + .pl-stats-lead { margin-top: -16px; }
.pl-stats-lead { color: rgba(255,255,255,.85); margin-bottom: 22px; }
.stats.pl-blk { padding: 48px 0; }
.pl-stats-tint { background: var(--ink); }
.pl-stats-plain { background: transparent; color: var(--text); }
.pl-stats-plain .pl-stats-t { color: var(--ink); } .pl-stats-plain .pl-stats-lead, .pl-stats-plain .stats-list dt { color: var(--muted); }
.pl-stats-plain .stats-list dd { color: var(--p); }
/* video */
.pl-video { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 18px 40px rgba(20,16,74,.16); }
.pl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* cards with links */
.pl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pl-cards-1 { grid-template-columns: 1fr; max-width: 520px; } .pl-cards-2 { grid-template-columns: repeat(2, 1fr); } .pl-cards-4 { grid-template-columns: repeat(4, 1fr); }
.pl-cards li > a, .pl-cards li > div { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--p); padding: 22px; color: var(--text); text-decoration: none; }
.pl-cards li > a:hover { border-top-color: var(--acc); box-shadow: 0 10px 24px rgba(20,16,74,.10); }
.pl-cards h3 { font-size: 20px; margin-bottom: 6px; }
.pl-cards p { color: var(--muted); margin: 0 0 12px; }
.pl-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--p); font-weight: 700; }
.pl-bg-tint .pl-cards li > a, .pl-bg-tint .pl-cards li > div { background: var(--bg); }
@media (max-width: 1000px) { .pl-cards, .pl-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pl-cards, .pl-cards-2, .pl-cards-4 { grid-template-columns: 1fr; } }
/* questions and testimonials on a coloured band keep their white boxes */
.pl-bg-brand .faq summary, .pl-bg-brand .voice blockquote { color: var(--ink); }
.pl-bg-brand .faq .prose { color: var(--text); }
.pl-bg-tint .faq details, .pl-bg-tint .voice { background: var(--bg); }