/* Header and news popup (CMAC_Site). 0.13.8: same design as the updated WPCode snippets (design rules).
   0.16.34: rem converted to px at Twenty Nineteen's 22 px root, so the header looks the same in any theme. */
/* 0.16.55: keep room for the scrollbar, so the centred header does not shift while a page loads. */
html{scrollbar-gutter:stable}
.cm-header {
    width: 100%;
    background:
    radial-gradient(circle at 48% 0%, rgba(169, 202, 255, 0.42), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(156, 204, 61, 0.20), transparent 30%),
    linear-gradient(135deg, #EAF3FF 0%, #F7FAFF 48%, #EEF8DF 100%);
    font-family: 'Titillium Web','Titillium Web Fallback', sans-serif;
    color: #12202E;
    padding: 44px 0 0px;
    margin-bottom: -26px;
    overflow: visible !important;
    position: relative;
    z-index: 5;
  }

  .cm-header .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 33px;
    box-sizing: border-box;
    overflow: visible !important;
  }

  .cm-header-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom: 11px;
  }

  .cm-header-left {
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-left: -11px;
  }

  .cm-header-left .title {
    font-size: 57px;
    font-weight: 600;
    color: #12202E;
    text-decoration: none;
    line-height: 1.1;
    margin-bottom: 7px;
    transition: color 0.3s ease;
  }

  .cm-header-left .title:hover {
    color: #9CCC3D;
  }

  .cm-header-left .logo {
    height: 34px;
  }

  .cm-header-links {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: 44px;
    transform: translateY(-4px);
  }

  .cm-header-links a {
    color: #12202E !important;
    text-decoration: none !important;
    font-family: 'Titillium Web','Titillium Web Fallback', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: color 0.25s ease;
  }

  .cm-header-links a:hover,
  .cm-header-links a:focus {
    color: #9CCC3D !important;
    text-decoration: none !important;
  }

  .cm-nav {
    display: flex;
    justify-content: center;
    margin-top: 11px;
    font-size: 31px;
    font-weight: 400;
    color: #12202E;
  }

  .cm-search {
    display: flex;
    justify-content: center;
    margin-top: 26px;
    max-width: 700px;
    min-height: 58px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 22px;
    box-sizing: border-box;
    overflow: visible !important;
    position: relative;
    z-index: 10;
  }

  body.search .cm-header,
  body.search-results .cm-header,
  body.search-no-results .cm-header {
    padding-bottom: 55px !important;
    margin-bottom: 0 !important;
  }

  body.search .cm-search,
  body.search-results .cm-search,
  body.search-no-results .cm-search {
    margin-bottom: 0 !important;
  }

  /* Search form */
  .cm-fallback-search {
    display: flex;
    width: 100%;
    max-width: 700px;
    height: 58px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(18, 32, 46, 0.10);
  }

  .cm-fallback-search input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 58px;
    padding: 0 26px;
    border: none;
    border-radius: 30px 0 0 30px;
    font-size: 22px;
    font-family: 'Titillium Web','Titillium Web Fallback', sans-serif;
    color: #12202E;
    background: #ffffff;
    box-sizing: border-box;
  }

  .cm-fallback-search input[type="text"],
  .cm-fallback-search input[type="text"]::placeholder {
    font-weight: 400 !important;
  }

  .cm-fallback-search input[type="text"]::placeholder {
    color: #6c7684;
    opacity: 1;
  }

  .cm-fallback-search input[type="text"]:focus {
    outline: none;
    box-shadow: none;
    background: #ffffff;
  }

  /* Browsers colour a field they autofill; keep it white like the rest of the pill. */
  .cm-fallback-search input[type="text"]:-webkit-autofill,
  .cm-fallback-search input[type="text"]:-webkit-autofill:hover,
  .cm-fallback-search input[type="text"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #12202E;
    caret-color: #12202E;
  }

  .cm-fallback-search button {
    flex: 0 0 86px;
    width: 86px;
    height: 58px;
    background-color: #9CCC3D;
    color: #ffffff;
    border: none;
    padding: 0;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
  }

  .cm-fallback-search button:hover,
  .cm-fallback-search button:focus-visible {
    background-color: #1F354D;
  }

  .cm-fallback-search button svg {
    width: 20px;
    height: 20px;
    fill: none !important;
    stroke: currentColor;
  }

  @media (max-width: 1200px) {
    .cm-header-left {
      margin-left: 0;
    }

    .cm-header-links {
      margin-right: 22px;
    }
  }

  @media (max-width: 768px) {
    .cm-header-top {
      grid-template-columns: 1fr;
      row-gap: 15px;
      text-align: center;
    }

    .cm-header-left {
      justify-self: center;
      align-items: center;
      text-align: center;
      margin-left: 0;
    }

    .cm-header-links {
      justify-self: center;
      justify-content: center;
      margin-right: 0;
      transform: none;
      gap: 22px;
    }

    .cm-header-left .title {
      font-size: 44px;
    }

    .cm-header-left .logo {
      height: 28px;
    }

    .cm-search {
      padding: 0 16px;
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 100%;
      justify-content: center;
    }

    .cm-nav {
      font-size: 24px;
    }
  }

  @media (max-width: 480px) {
    .cm-header-left .title {
      font-size: 35px;
    }

    .cm-header-left .logo {
      height: 24px;
    }

    .cm-header-links {
      gap: 18px;
    }

    .cm-header-links a {
      font-size: 21px;
    }

    .cm-search {
      min-height: 54px;
    }

    .cm-fallback-search {
      height: 54px;
    }

    .cm-fallback-search input[type="text"] {
      font-size: 20px;
      height: 54px;
    }

    .cm-fallback-search button {
      height: 54px;
      width: 70px;
      flex-basis: 70px;
    }
  }

/* 0.16.45 — Phones: one line at the top (green mark + Academy left, language + contact right),
   full-width search below, "How can we help?" only on the front page. The full CM logo, the
   language picker's desktop flags (WPML) and the line stay as before on larger screens. */
.cm-header .cm-mark-link,.cm-header .cm-lang{display:none}
@media (max-width: 700px) {
  .cm-header{padding:12px 0 0;margin-bottom:0}
  .cm-header .inner{padding:0 16px}
  .cm-header-top{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0;text-align:left}
  .cm-header-left{flex-direction:row!important;align-items:center!important;gap:8px;margin:0!important;justify-self:auto}
  .cm-header .cm-mark-link{display:flex}
  .cm-header .cm-mark{display:block;width:28px;height:28px}
  .cm-header-left .title{font-size:26px!important;line-height:1!important;margin:0!important}
  .cm-header .cm-logo-link{display:none}
  .cm-header-links{gap:16px!important;margin:0!important;transform:none!important;justify-self:auto}
  .cm-header-links > a{font-size:16px!important;min-height:44px;display:inline-flex!important;align-items:center}
  .cm-header .cm-lang{display:block;position:relative}
  .cm-lang summary{display:flex;align-items:center;gap:2px;min-height:44px;padding:0 4px;font-size:16px;font-weight:600;color:#12202E;cursor:pointer;list-style:none}
  .cm-lang summary::-webkit-details-marker{display:none}
  .cm-lang[open] summary svg{transform:rotate(180deg)}
  .cm-lang-menu{position:absolute;right:-8px;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;gap:2px;min-width:200px;padding:8px;border:1px solid #DCE4EC;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(18,32,46,.10)}
  .cm-lang-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;font-size:16px;font-weight:400;line-height:1.3;color:#12202E!important;text-decoration:none!important}
  .cm-lang-menu a span{flex:1}
  .cm-lang-menu a img{flex:none;display:block;width:20px!important;height:15px!important;margin:0!important;border-radius:2px!important;box-shadow:0 0 0 1px #DCE4EC!important}
  .cm-lang-menu a:hover,.cm-lang-menu a:focus-visible{background:#F5FAEC}
  .cm-lang-menu a[aria-current]{font-weight:600;background:#F5F8FC}
  .cm-lang-menu .cm-lang-check{flex:none;color:#9CCC3D;fill:none!important}
  .cm-nav{display:none!important}
  .cm-header--home .cm-nav{display:flex!important;margin-top:8px;font-size:22px!important}
  .cm-search{margin-top:8px!important;padding:0!important;min-height:48px}
  .cm-fallback-search{height:48px!important}
  .cm-fallback-search input[type="text"]{height:48px!important;padding:0 18px!important;font-size:16px!important}
  .cm-fallback-search button{height:48px!important;width:56px!important;flex-basis:56px!important}
  body.search .cm-header,body.search-results .cm-header,body.search-no-results .cm-header{padding-bottom:16px!important}
  body:has(.cm-header .cm-lang) .wpml-ls-statics-footer,body:has(.cm-header .cm-lang) .wpml-ls-statics-shortcode_actions{display:none!important}
}

/* News popup */
@keyframes cmPopupIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
#cm-popup{display:none;position:fixed;left:24px;bottom:24px;width:380px;max-width:calc(100vw - 32px);z-index:2147483647;box-sizing:border-box;padding:24px;background:radial-gradient(circle at 88% 50%,rgba(156,204,61,.16) 0%,transparent 38%),linear-gradient(135deg,#fff,#F5F8FC);border:1px solid #DCE4EC;border-radius:16px;box-shadow:0 8px 20px rgba(18,32,46,.10);font-family:"Titillium Web","Titillium Web Fallback",sans-serif;color:#12202E;text-align:left;animation:cmPopupIn .5s ease-out}
#cm-popup *{box-sizing:border-box}
#cm-popup svg{fill:none!important}
#cm-popup .cm-popup-x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:8px;background:transparent;color:#526173;cursor:pointer;box-shadow:none}
#cm-popup .cm-popup-x:hover{background:#F5F8FC}
#cm-popup .cm-popup-title{margin:0 0 16px;padding:4px 40px 0 0;font-family:inherit;font-size:18px;font-weight:600;line-height:1.3;color:#12202E;text-transform:none;letter-spacing:0}
#cm-popup .cm-popup-list{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#cm-popup .cm-popup-list li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:0;font-size:16px;line-height:1.45;color:#12202E}
#cm-popup .cm-popup-list li::before{content:none!important;display:none!important}
#cm-popup .cm-popup-ico{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:#9CCC3D;box-shadow:0 0 0 4px #F5FAEC}
#cm-popup .cm-popup-ico svg{display:none}
#cm-popup .cm-popup-actions{display:flex;gap:8px}
#cm-popup .cm-popup-button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;margin:0;border-radius:8px;font-family:inherit;font-size:16px;font-weight:700;line-height:1;text-decoration:none!important;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background-color .2s ease,border-color .2s ease}
#cm-popup .cm-popup-button-primary,#cm-popup .cm-popup-button-primary:visited{background:#9CCC3D;border:0;color:#fff!important}
#cm-popup .cm-popup-button-primary:hover,#cm-popup .cm-popup-button-primary:focus-visible{background:#1F354D;color:#fff!important}
#cm-popup .cm-popup-button-secondary{background:#fff;border:1px solid #DCE4EC;color:#12202E}
#cm-popup .cm-popup-button-secondary:hover,#cm-popup .cm-popup-button-secondary:focus-visible{background:#F5FAEC;border-color:#9CCC3D;color:#12202E}
#cm-popup a:focus-visible,#cm-popup button:focus-visible{outline:2px solid #185ABC;outline-offset:2px}
#cm-popup .cm-popup-mini{display:none}
/* Phones (0.16.54): a small box bottom right with the newest item, Read more and ×. */
@media (max-width:700px){
#cm-popup{left:auto;right:12px;bottom:12px;width:224px;max-width:calc(100vw - 24px);padding:16px 4px 8px 16px}
#cm-popup>:not(.cm-popup-mini){display:none!important}
#cm-popup .cm-popup-mini{display:flex;flex-direction:column;gap:4px}
#cm-popup .cm-popup-mini-top{display:flex;align-items:flex-start;gap:4px}
#cm-popup .cm-popup-mini-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#cm-popup .cm-popup-mini-label{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#185ABC}
#cm-popup .cm-popup-mini-title{font-size:16px;font-weight:600;line-height:1.35;color:#12202E}
#cm-popup .cm-popup-mini-x{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;margin:-8px 0 0;padding:0;border:0;border-radius:999px;background:none;color:#526173;cursor:pointer}
#cm-popup .cm-popup-mini-x:hover{background:#F5F8FC}
#cm-popup .cm-popup-mini-read{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-size:15px;font-weight:700;color:#185ABC!important;text-decoration:none!important}
#cm-popup .cm-popup-mini-read:hover,#cm-popup .cm-popup-mini-read:focus-visible{color:#9CCC3D!important}
}
@media (prefers-reduced-motion:reduce){#cm-popup{animation:none}}
