/* CMA colour refresh — 22 September 2026 */
:root{--cma-blue:#176f9e;--cma-sky:#1697b8;--cma-coral:#df4a45;--cma-orange:#ee8438;--cma-gold:#f8c84b;--cma-plum:#72597f;--cma-ink:#263746}
body{background:#f5f8fa;color:var(--cma-ink)}
.container{box-shadow:0 0 40px rgba(21,60,84,.06)}
#header{height:142px;background:#fff;border-top:7px solid transparent;border-image:linear-gradient(90deg,var(--cma-gold),var(--cma-orange),var(--cma-coral),var(--cma-plum),var(--cma-sky)) 1}
#header #menu li a{color:var(--cma-blue);opacity:1;border-color:#d9e5ea}
#header #menu li a:hover{color:var(--cma-coral)}
#logo{width:330px!important;height:120px!important;object-fit:contain;margin:9px 30px!important}
#frmSearch{background:#eef5f8;color:var(--cma-blue)}
#nav{background:var(--cma-blue)}
#nav li a{background:var(--cma-blue);color:#fff;border-color:#43768e;font:12px/22px Arial,sans-serif;padding:8px 10px}
#nav>li:nth-child(1)>a{border-bottom:4px solid var(--cma-gold)}
#nav>li:nth-child(2)>a{border-bottom:4px solid var(--cma-orange)}
#nav>li:nth-child(3)>a{border-bottom:4px solid var(--cma-coral)}
#nav>li:nth-child(4)>a{border-bottom:4px solid var(--cma-sky)}
#nav>li:nth-child(5)>a{border-bottom:4px solid var(--cma-plum)}
#nav>li:nth-child(6)>a{border-bottom:4px solid var(--cma-gold)}
#nav li a:hover,#nav li a:focus,#nav ul li a:hover{background:#104361;color:#fff}
#main #content,#main .column{border-color:#b7d9e6}

#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content p:has(+table.MsoNormalTable){display:block;margin:0;padding:10px 0 7px!important;text-align:center!important;color:var(--cma-blue);font-weight:700}
#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content p:has(+table.MsoNormalTable:not(:has(caption))){display:block;margin:0;padding:10px 0 7px!important;text-align:center!important;color:var(--cma-blue);font-weight:700}


/* Term Dates: a focused table treatment for clear dates and centred term titles. */
#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content table.MsoNormalTable{width:100%!important;border-collapse:collapse!important;border:1px solid #b7d9e6!important;margin:0 0 20px!important}
#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content table.MsoNormalTable td,#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content table.MsoNormalTable td *{padding:8px 10px!important;border:1px solid #d9e5ea!important;text-align:left!important;vertical-align:top}
#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content table.MsoNormalTable caption,#main.cma-inner:has(>#menu a.selected[href*="term-dates"]) #content div:has(+table.MsoNormalTable:last-of-type){display:block;margin:0;padding:10px 0 7px!important;text-align:center!important;color:var(--cma-blue);font-weight:700}
/* Override the template rule that resets legacy justified content to left alignment. */
html:root body #main.cma-inner #content :is(p,div)[style*="justify"],html:root body #main.cma-inner>#full :is(p,div)[style*="justify"]{text-align:justify!important;text-justify:inter-word}


/* Ensure all legacy inner-page paragraphs use the shared justified text style. */
html body #main.cma-inner #content p,html body #main.cma-inner #content p *,html body #main.cma-inner>#full p,html body #main.cma-inner>#full p *{text-align:justify!important;text-justify:inter-word}
/* Give legacy rich-text paragraphs sufficient specificity to override screen.css. */
html body #main.cma-inner #content p.p1[style],html body #main.cma-inner #content p.p1[style] .s1,html body #main.cma-inner>#full p.p1[style],html body #main.cma-inner>#full p.p1[style] .s1{text-align:justify!important;text-justify:inter-word}


/* Override legacy paragraph alignment on all inner pages. */
#main.cma-inner #content p,#main.cma-inner #content p *,#main.cma-inner>#full p,#main.cma-inner>#full p *{text-align:justify!important;text-justify:inter-word}
/* Apply justification to legacy direct text nodes while retaining left-aligned headings. */
#main.cma-inner #content,#main.cma-inner>#full{text-align:justify;text-justify:inter-word}
#main.cma-inner #content h1,#main.cma-inner #content h2,#main.cma-inner #content h3,#main.cma-inner>#full h1,#main.cma-inner>#full h2,#main.cma-inner>#full h3{text-align:left}

/* Improve reading alignment and spacing on inner pages. */
#main.cma-inner #content p,#main.cma-inner>#full p,#main.cma-inner .column p{text-align:justify;text-justify:inter-word}
#main.cma-inner #content,#main.cma-inner>#full{box-sizing:border-box;padding-left:18px;padding-right:18px}

/* Allow the full homepage Instagram embed to display. */
@media screen and (min-width:768px){#main:not(.cma-inner)>.column:has(#share) #share iframe[title="CMA Instagram feed"]{height:600px!important}}


/* Keep Instagram on the homepage only; clarify the Facebook footer button. */
#main.cma-inner #share{display:none!important}
#footer #social li:nth-child(1) a{display:flex!important;align-items:center;justify-content:center;background:var(--cma-sky)!important}
#footer #social li:nth-child(1) a img{display:none!important}
#footer #social li:nth-child(1) a::after{content:"f";color:#fff;font:bold 26px/30px Arial,sans-serif;transform:translateY(2px)}
#footer>div:not(#social),#footer>div:not(#social) a{color:var(--cma-sky)!important}

/* Replace legacy gold accents with CMA coral. */
#main #menu a.selected{color:var(--cma-coral)!important}
#footer .copyright,#footer p,#footer .copyright a{color:var(--cma-sky)!important}

#main #content h1,#main .column h1,#main #menu h1{color:var(--cma-blue)}
#main #content h2{color:var(--cma-coral)}
#content a,#main .column a{color:var(--cma-blue)}
#footer{background:#174e72;border-top:6px solid transparent;border-image:linear-gradient(90deg,var(--cma-gold),var(--cma-orange),var(--cma-coral),var(--cma-plum),var(--cma-sky)) 1}
#footer a,#footer ul#foot-nav li a{color:#fff}
@media screen and (max-width:600px){#header{height:auto;padding:10px 12px 8px}#logo{display:block;float:none;width:min(330px,90vw)!important;height:auto!important;margin:0 auto 16px!important}#nav li a{border-bottom:0!important;border-left:5px solid var(--cma-gold);padding:12px 16px}#nav>li:nth-child(2)>a{border-left-color:var(--cma-orange)}#nav>li:nth-child(3)>a{border-left-color:var(--cma-coral)}#nav>li:nth-child(4)>a{border-left-color:var(--cma-sky)}#nav>li:nth-child(5)>a{border-left-color:var(--cma-plum)}}
/* Match all navigation dropdown panels to the CMA colour navigation. */
#nav ul,#nav ul li a,#nav ul li.hover a{background-color:var(--cma-blue)!important;border-color:#43768e}
#nav ul li a:hover,#nav ul li a.hover{background-color:#104361!important;color:#fff!important}
#nav ul ul{border-left-color:#43768e}
/* Unified footer social icons. */
#footer #social{clear:both;float:none;width:100%;padding-top:16px}
#footer #social ul{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
#footer #social li{margin:0;padding:0;line-height:1}
#footer #social a{display:block;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#fff;transition:transform .15s ease,background-color .15s ease}
#footer #social img,#footer #social svg{display:block;width:30px!important;height:30px!important}
#footer #social img{filter:grayscale(1) brightness(0) invert(1);background:var(--cma-blue)}
#footer #social a:hover{transform:translateY(-2px);background:var(--cma-coral)}
#footer #social a:hover img{background:var(--cma-coral)}

/* Header alignment and mobile CMA utility navigation. */
@media screen and (min-width:601px){
  #frmSearch{position:absolute;top:62px;right:30px;margin:0;z-index:100}
}
@media screen and (max-width:600px){
  #header #menu{width:100%;margin:0;background:var(--cma-blue);border-radius:4px;overflow:hidden}
  #header #menu li{flex:1;padding:0}
  #header #menu li a{padding:12px 8px;color:#fff;border-right:1px solid rgba(255,255,255,.3);text-align:center;white-space:nowrap}
  #header #menu li:last-child a{border-right:0}
  #header #menu li a:hover{background:#104361;color:#fff}
}

/* Keep mobile and narrow-tablet search below the logo. */
@media screen and (max-width:767px){
  #frmSearch{position:static!important;float:none!important;margin:12px 16px!important}
  #btnSearch{background:var(--cma-blue)!important;color:#fff!important}
  #header #menu{width:100%;margin:0;background:var(--cma-blue);border-radius:4px;overflow:hidden}
  #header #menu li{flex:1;padding:0}
  #header #menu li a{padding:12px 8px;color:#fff;border-right:1px solid rgba(255,255,255,.3);text-align:center;white-space:nowrap}
  #header #menu li:last-child a{border-right:0}
}

/* CMA-colour footer social identities. */
#footer #social li:nth-child(1) a img{background:var(--cma-sky)}
#footer #social li:nth-child(2) a{background:var(--cma-coral)}
#footer #social li:nth-child(2) svg rect{fill:var(--cma-coral)!important}
#footer #social li:nth-child(1) a:hover img{background:var(--cma-gold)}
#footer #social li:nth-child(2) a:hover,#footer #social li:nth-child(2) a:hover svg rect{background:var(--cma-gold);fill:var(--cma-gold)!important}
@media screen and (max-width:767px){#frmSearch{margin-top:24px!important}}

/* Complete the CMA colour treatment for homepage headings and the legacy side menu. */
#main #content h2,#main #share h1{color:var(--cma-coral);font:700 18px/23.4px Arial,Helvetica,sans-serif;margin:15px 0 8px;padding:0}
#main>#menu{background:#eef5f8;border-left:4px solid var(--cma-sky)}
#main #menu h1{color:var(--cma-blue)}
#main #menu a{color:var(--cma-ink)}
#main #menu a:hover,#main #menu a:focus{color:var(--cma-coral)}

/* Responsive menu controls are inserted by the legacy navigation script. */
@media screen and (max-width:767px){
  .cma-mobile-toggle{background:var(--cma-blue)!important;color:#fff!important;border-color:var(--cma-blue)!important}
  .cma-sub-toggle{background:#104361!important;color:#fff!important;border-color:#104361!important}
  .cma-mobile-toggle:hover,.cma-mobile-toggle:focus{background:var(--cma-coral)!important;border-color:var(--cma-coral)!important}
}

/* Carry the Music Services side-panel colour down the full desktop content area. */
@media screen and (min-width:768px){
  #main{background:linear-gradient(to right,#eef5f8 0,#eef5f8 244px,#fff 244px,#fff 100%)}
}

/* Keep the Instagram block inside the desktop three-column grid on inner pages. */
@media screen and (min-width:768px){
  #main.cma-inner .column:has(#share){width:224px}
  #main.cma-inner .column:has(#share) #share{width:224px}
}

/* On phones, show a clear Instagram link rather than a cramped embedded feed. */
@media screen and (max-width:767px){
  #share{width:100%!important;margin:24px 0 0!important;padding:0!important;border:0!important}
  #share iframe[title="CMA Instagram feed"]{display:none!important}
  #share p{margin:0;text-align:center}
  #share p a{display:inline-block;padding:12px 16px;background:var(--cma-coral)!important;color:#fff!important;font-weight:bold;text-decoration:none}
}

/* Keep the Instagram call-to-action compact and centred on every screen. */
#share{width:100%!important;max-width:320px!important;float:none!important;margin:32px auto 18px!important;padding:0!important;border:0!important;text-align:center}
#share iframe[title="CMA Instagram feed"]{display:none!important}
#share h1{position:static!important;width:auto!important;top:auto!important;left:auto!important;margin:0 0 12px!important;padding:0 0 8px!important;border-bottom:1px dotted #b7d9e6!important;text-align:left}
#share p{width:auto!important;margin:0!important;text-align:center}
#share p a{display:inline-block;padding:12px 16px;background:var(--cma-coral)!important;color:#fff!important;font-weight:bold;text-decoration:none}
@media screen and (min-width:768px){#main.cma-inner .column:has(#share){clear:both;float:none!important;width:708px!important;margin:36px 0 0 252px!important;border-top:1px dotted #b7d9e6}#main.cma-inner .column:has(#share) #share{margin:0 auto 18px!important}}

/* Centre page-content images on phones without changing their size. */
@media screen and (max-width:767px){#main #content img,#main .column img,#main>#full img{display:block;margin-left:auto!important;margin-right:auto!important}}
@media screen and (max-width:767px){#main #content #etf img{display:inline;margin-left:0!important;margin-right:0!important}}

/* Give mobile blue menu bars clear space around their labels and controls. */
@media screen and (max-width:767px){.cma-mobile-toggle,.cma-sub-toggle{padding:12px 52px 12px 18px!important}}

/* Keep the right-hand mobile menu control clear of the bar edge. */
@media screen and (max-width:767px){.cma-mobile-toggle{padding:12px 52px 12px 18px!important}.cma-sub-toggle{padding:0!important}.cma-mobile-toggle::after{right:22px!important}}

/* Keep the right-hand mobile menu control clear of the bar edge. */
@media screen and (max-width:767px){.cma-mobile-toggle{padding:12px 52px 12px 18px!important}.cma-sub-toggle{padding:0!important}.cma-mobile-toggle::after{right:22px!important}}

/* Restore the full Instagram panel on the homepage desktop grid. */
@media screen and (min-width:768px){#main:not(.cma-inner)>.column:has(#share){width:468px!important;margin:0 0 0 12px!important}#main:not(.cma-inner) #share{width:468px!important;max-width:none!important;margin:0!important}#main:not(.cma-inner) #share iframe[title="CMA Instagram feed"]{display:block!important;width:100%!important;height:440px!important}}

/* Restore the full Instagram panel on the homepage desktop grid. */
@media screen and (min-width:768px){#main:not(.cma-inner)>.column:has(#share){width:468px!important;margin:0 0 0 12px!important}#main:not(.cma-inner) #share{width:468px!important;max-width:none!important;margin:0!important}#main:not(.cma-inner) #share iframe[title="CMA Instagram feed"]{display:block!important;width:100%!important;height:440px!important}}