/* 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 #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}}