/*
Theme Name: CM Academy
Description: Minimal frame for CM Academy. Header, popup, knowledge base templates and blocks come from CM Academy Companion; the theme supplies the page shell, background and type.
Version: 1.0.7
Requires at least: 6.4
Requires PHP: 7.4
Author: CM Academy
Text Domain: cm-academy
*/

*,*::before,*::after{box-sizing:border-box}
/* 22 px root as in Twenty Nineteen: the header and the Custom HTML pages size in rem. */
html{font-size:22px;-webkit-text-size-adjust:100%}
/* 1.0.7: room for the scrollbar is always kept, so centred content does not shift ~8 px when it appears while the page loads. */
html{scrollbar-gutter:stable}
/* Body 22 px / 1.8 as in Twenty Nineteen: Additional CSS and the Custom HTML pages size in em. */
body{margin:0;min-height:100vh;font-family:'Titillium Web','Titillium Web Fallback',system-ui,sans-serif;font-size:22px;line-height:1.8;-moz-osx-font-smoothing:grayscale;color:#12202E;background-color:#F7FAFF;-webkit-font-smoothing:antialiased}
/* 1.0.6: the ombre sits on a layer fixed to the window. iPhone and iPad Safari ignore
   background-attachment:fixed, so the gradient was stretched over the whole page height and
   only its blue top showed. The browser's phone preview supports it, so it looked right there. */
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 48% 0%,rgba(169,202,255,.42),transparent 34%),radial-gradient(circle at 88% 12%,rgba(156,204,61,.20),transparent 30%),linear-gradient(135deg,#EAF3FF 0%,#F7FAFF 48%,#EEF8DF 100%)}
img,video,iframe,svg{max-width:100%}
img{height:auto}
a{color:#185ABC;text-decoration:none}
a:hover,a:focus-visible{color:#12202E}
:focus-visible{outline:2px solid #185ABC;outline-offset:2px}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;color:#12202E}
h1{font-size:40px;font-weight:700}
h2{font-size:29px;font-weight:700}
h3{font-size:22px;font-weight:600}
h4{font-size:18px;font-weight:600}
p,ul,ol{margin:0 0 1em}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:100001;width:auto;height:auto;clip:auto;padding:12px 16px;border-radius:8px;background:#fff;color:#185ABC;font-weight:600}

/* Pages are full width: Custom HTML pages (home, Inspiration, Resources, Training) lay out
   their own sections. Ordinary content gets a readable column. */
.cma-main{display:block;width:100%}
.cma-page{width:100%}
.cma-page > .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-html):not([id^="cm-"]):not([class*="cm-"]){max-width:1006px;margin-left:auto;margin-right:auto}
.cma-page > .entry-content > .alignwide{max-width:1440px;margin-left:auto;margin-right:auto}
.cma-page > .entry-content{padding:0 2rem}
.cma-page > .entry-content > .alignfull{margin-left:-2rem;margin-right:-2rem}

/* Plain posts, archives, 404 (KB pages use Companion's templates). */
.cma-wrap{width:min(1006px,calc(100vw - 4rem));margin:48px auto 64px;font-size:16px;line-height:1.6}
.cma-box{padding:48px 56px;border:1px solid #DCE4EC;border-radius:16px;background:#fff;box-shadow:0 4px 12px rgba(18,32,46,.05)}
.cma-list{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.cma-list a{font-size:18px;font-weight:600}
.cma-meta{font-size:14px;color:#526173}
.cma-pages .nav-links{display:flex;gap:8px;margin-top:32px}
.cma-404{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cma-404 p{margin:0;color:#526173}
.cma-button{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:2px solid #9CCC3D;border-radius:8px;background:#9CCC3D;color:#fff;font-weight:600;transition:background .15s ease,color .15s ease}
.cma-button:hover,.cma-button:focus-visible{background:transparent;color:#4F7A15}
@media(max-width:700px){.cma-box{padding:28px 20px}.cma-page > .entry-content{padding:0 1rem}.cma-page > .entry-content > .alignfull{margin-left:-1rem;margin-right:-1rem}h1{font-size:32px}}

/* 1.0.3 — One gap under the header on every page, also Custom HTML pages without Companion
   blocks (Companion's CSS is not loaded there). Same value as Companion's --cmac-top. */
:root{--cmac-top:44px}
html body:has(.cmac-page) article .entry-content,html body article .entry-content:has(.cmac-page){margin-top:0!important;padding-top:0!important}
html body .entry-content > :first-child:has(.cmac-page){margin-top:0!important;padding-top:0!important}
html body .entry-content .cmac-page:not(.cmac-page .cmac-page){margin-top:var(--cmac-top)!important}
html body main.cmac-kb{padding-top:var(--cmac-top)!important}

/* 1.0.4 — The language flags sit at the top of the page and scroll away with the header
   (they were fixed to the window and lay over the content). */
html body .wpml-ls-statics-footer,html body .wpml-ls-statics-shortcode_actions,html body .wpml-ls-legacy-list-horizontal,html body .wpml-ls-legacy-dropdown,html body .wpml-ls-legacy-dropdown-click{position:absolute!important}